NAKAOKA B2B ORDER<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n brand: {\n red: \"#D32F2F\",\n black: \"#333333\",\n }\n },\n fontFamily: {\n sans: ['\"Noto Sans JP\"', \"sans-serif\"],\n },\n boxShadow: {\n 'soft': '0 4px 20px -2px rgba(0, 0, 0, 0.05)',\n }\n }\n }\n }\n <\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap\"\n rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons+Outlined\" rel=\"stylesheet\">\n\n <style>\n body {\n font-family: 'Noto Sans JP', sans-serif;\n -webkit-font-smoothing: antialiased;\n background-color: #f8fafc;\n }\n\n .glass-header {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border-bottom: 1px solid rgba(226, 232, 240, 0.8);\n }\n\n .spinner {\n border: 3px solid rgba(226, 232, 240, 0.3);\n border-left-color: #D32F2F;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n animation: spin 1s linear infinite;\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n\n \/* Mobile optimization *\/\n input,\n select,\n textarea {\n font-size: 16px !important;\n }\n\n \/* Prevent zoom on iOS *\/\n html,\n body {\n overflow-x: hidden;\n width: 100%;\n }\n\n \/* WordPress Theme Overrides - Hide Footer & Header *\/\n .wp-site-blocks>footer,\n .wp-block-template-part,\n footer[class*=\"wp-block-\"],\n .site-footer,\n #colophon {\n display: none !important;\n }\n\n \/* Ensure app takes full width *\/\n .entry-content,\n .wp-block-post-content {\n max-width: none !important;\n padding: 0 !important;\n margin: 0 !important;\n }\n <\/style>\n<\/head>\n\n<body class=\"text-slate-800\">\n\n <div id=\"nakaoka-app-overlay\" class=\"bg-slate-50 min-h-screen\">\n <div class=\"max-w-5xl mx-auto min-h-screen relative pb-48\">\n\n \n <header\n class=\"glass-header sticky top-0 z-[100] px-4 py-3 flex justify-between items-center transition-all duration-300\">\n \n <div class=\"flex flex-col shrink-0 max-w-[40%]\">\n <div id=\"user-salon-display\" class=\"text-xs font-bold text-slate-900 truncate\"><\/div>\n <div id=\"user-name-display\" class=\"text-[10px] text-slate-500 truncate\"><\/div>\n <\/div>\n\n \n <div id=\"user-nav\" class=\"hidden flex items-center gap-2 shrink-0\">\n <button onclick=\"showOrderHistory()\"\n class=\"text-[10px] sm:text-xs font-bold text-slate-600 bg-slate-100 hover:bg-slate-200 px-2 py-2 rounded transition whitespace-nowrap\">\n \u8cfc\u5165\u5c65\u6b74\n <\/button>\n <button onclick=\"showProfileEdit()\"\n class=\"text-[10px] sm:text-xs font-bold text-slate-600 bg-slate-100 hover:bg-slate-200 px-2 py-2 rounded transition whitespace-nowrap\">\n \u60c5\u5831\u5909\u66f4\n <\/button>\n <button onclick=\"logout()\"\n class=\"text-[10px] sm:text-xs font-bold text-slate-500 hover:text-brand-red px-1 py-2 transition underline decoration-slate-300 underline-offset-4 whitespace-nowrap\">\n \u30ed\u30b0\u30a2\u30a6\u30c8\n <\/button>\n <\/div>\n <\/header>\n\n \n <div id=\"loading\"\n class=\"fixed inset-0 bg-white\/90 z-[9999] flex flex-col items-center justify-center transition-opacity duration-300\"\n style=\"display: none;\">\n <div class=\"spinner mb-4\"><\/div>\n <p class=\"text-brand-red text-xs font-bold tracking-widest animate-pulse\">PROCESSING<\/p>\n <\/div>\n\n \n <div id=\"auth-screen\" class=\"p-4 sm:p-8 max-w-md mx-auto mt-10 sm:mt-20\">\n \n <div id=\"login-view\" class=\"bg-white p-8 rounded-xl border border-slate-200 shadow-xl\">\n <h2 class=\"text-xl font-bold text-center mb-8 text-slate-900 tracking-wider\">MEMBER LOGIN<\/h2>\n <form onsubmit=\"handleLogin(event)\" class=\"space-y-5\">\n <div>\n <label class=\"block text-xs font-bold text-slate-500 mb-1\">\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9<\/label>\n <input type=\"email\" id=\"login-email\" required\n class=\"w-full bg-slate-50 border border-slate-200 p-3 rounded-lg focus:border-brand-red focus:bg-white focus:ring-1 focus:ring-brand-red outline-none transition text-sm\">\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-slate-500 mb-1\">\u30d1\u30b9\u30ef\u30fc\u30c9<\/label>\n <input type=\"password\" id=\"login-password\" required\n class=\"w-full bg-slate-50 border border-slate-200 p-3 rounded-lg focus:border-brand-red focus:bg-white focus:ring-1 focus:ring-brand-red outline-none transition text-sm\">\n <\/div>\n <button type=\"submit\"\n class=\"w-full bg-slate-900 text-white font-bold py-4 rounded-lg hover:bg-brand-red transition-colors duration-300 shadow-lg shadow-slate-200 text-sm tracking-wide\">\u30ed\u30b0\u30a4\u30f3<\/button>\n <\/form>\n <div class=\"mt-8\">\n <div class=\"bg-gray-50 p-5 rounded-xl border border-gray-200 text-center\">\n <h3 class=\"text-sm font-bold text-slate-700 mb-2\">\u65b0\u898f\u4f1a\u54e1\u767b\u9332<\/h3>\n <p class=\"text-[10px] text-slate-400 mb-4\">\u30a2\u30ab\u30a6\u30f3\u30c8\u3092\u304a\u6301\u3061\u3067\u306a\u3044\u65b9\u306f\u3053\u3061\u3089<\/p>\n <button onclick=\"showRegister()\"\n class=\"w-full bg-white text-brand-red border border-brand-red font-bold py-3 rounded-lg hover:bg-brand-red hover:text-white transition-all duration-300 shadow-sm text-sm\">\u65b0\u898f\u767b\u9332\u3059\u308b<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"register-view\" class=\"bg-white p-8 rounded-xl border border-slate-200 shadow-xl\"\n style=\"display: none;\">\n <h2 class=\"text-xl font-bold text-center mb-2 text-slate-900 tracking-wider\">NEW ACCOUNT<\/h2>\n <p class=\"text-xs text-center text-slate-400 mb-8\">\u3054\u767b\u9332\u60c5\u5831\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n <form onsubmit=\"handleRegister(event)\" class=\"space-y-4\">\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u304a\u540d\u524d <span\n class=\"text-red-400\">*<\/span><\/label><input type=\"text\" name=\"name\" required\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u30b5\u30ed\u30f3\u540d <span\n class=\"text-red-400\">*<\/span><\/label><input type=\"text\" name=\"salon\" required\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u5f79\u8077<\/label><input type=\"text\"\n name=\"position\"\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u30b5\u30ed\u30f3\u4f4f\u6240 <span\n class=\"text-red-400\">*<\/span><\/label><input type=\"text\" name=\"address\" required\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u643a\u5e2f\u756a\u53f7 <span\n class=\"text-red-400\">*<\/span><\/label><input type=\"tel\" name=\"mobile\" required\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9 <span\n class=\"text-red-400\">*<\/span><\/label><input type=\"email\" name=\"email\" required\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <button type=\"submit\"\n class=\"w-full bg-brand-red text-white font-bold py-3 mt-6 rounded-lg hover:bg-rose-800 transition shadow-lg shadow-rose-100 text-sm\">\u767b\u9332\u30e1\u30fc\u30eb\u3092\u9001\u4fe1<\/button>\n <button type=\"button\" onclick=\"showLogin()\"\n class=\"w-full text-xs text-slate-400 mt-4 hover:text-slate-600\">\u30ad\u30e3\u30f3\u30bb\u30eb<\/button>\n <\/form>\n <\/div>\n\n \n <div id=\"setup-view\" class=\"bg-white p-8 rounded-xl border border-slate-200 shadow-xl\"\n style=\"display: none;\">\n <h2 class=\"text-xl font-bold text-center mb-8 text-slate-900 tracking-wider\">PASSWORD SETUP<\/h2>\n <form onsubmit=\"handleSetup(event)\" class=\"space-y-6\">\n <input type=\"hidden\" id=\"setup-token\">\n <div>\n <label class=\"block text-xs font-bold text-slate-500 mb-1\">\u65b0\u3057\u3044\u30d1\u30b9\u30ef\u30fc\u30c9<\/label>\n <input type=\"password\" id=\"setup-pass\" required minlength=\"6\"\n class=\"w-full bg-slate-50 border border-slate-200 p-3 rounded-lg focus:border-brand-red focus:bg-white outline-none transition text-sm\">\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-slate-500 mb-1\">\u30d1\u30b9\u30ef\u30fc\u30c9\uff08\u78ba\u8a8d\u7528\uff09<\/label>\n <input type=\"password\" id=\"setup-pass-confirm\" required minlength=\"6\"\n class=\"w-full bg-slate-50 border border-slate-200 p-3 rounded-lg focus:border-brand-red focus:bg-white outline-none transition text-sm\">\n <\/div>\n <button type=\"submit\"\n class=\"w-full bg-slate-900 text-white font-bold py-4 rounded-lg hover:bg-slate-700 transition shadow-lg text-sm\">\u8a2d\u5b9a\u3092\u5b8c\u4e86\u3059\u308b<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n \n <div id=\"profile-edit-view\" class=\"p-4 sm:p-8 max-w-md mx-auto mt-10\" style=\"display: none;\">\n <div class=\"bg-white p-8 rounded-xl shadow-soft\">\n <h2 class=\"text-xl font-bold text-center mb-8 text-slate-900 tracking-wider\">EDIT PROFILE<\/h2>\n <form onsubmit=\"handleUpdateProfile(event)\" class=\"space-y-4\">\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u304a\u540d\u524d<\/label><input type=\"text\"\n id=\"edit-name\" required\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u30b5\u30ed\u30f3\u540d<\/label><input type=\"text\"\n id=\"edit-salon\" required\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u5f79\u8077<\/label><input type=\"text\"\n id=\"edit-position\"\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u30b5\u30ed\u30f3\u4f4f\u6240<\/label><input type=\"text\"\n id=\"edit-address\" required\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u643a\u5e2f\u756a\u53f7<\/label><input type=\"tel\"\n id=\"edit-mobile\" required\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div class=\"pt-2\"><label class=\"block text-[10px] font-bold text-slate-300\">\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\n (\u5909\u66f4\u4e0d\u53ef)<\/label>\n <div id=\"edit-email-display\" class=\"text-sm text-slate-500 py-1\"><\/div>\n <\/div>\n <button type=\"submit\"\n class=\"w-full bg-slate-900 text-white font-bold py-3 mt-6 rounded-lg hover:bg-brand-red transition shadow-lg text-sm\">\u5909\u66f4\u3092\u4fdd\u5b58<\/button>\n <button type=\"button\" onclick=\"initShop()\"\n class=\"w-full text-xs text-slate-400 mt-4 hover:text-slate-600\">\u30ad\u30e3\u30f3\u30bb\u30eb<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n \n <div id=\"order-history-view\" class=\"p-4 sm:p-8 max-w-3xl mx-auto mt-10\" style=\"display: none;\">\n <div class=\"flex items-center justify-between mb-8\">\n <h2 class=\"text-2xl font-black text-slate-900 tracking-tight\">ORDER HISTORY<\/h2>\n <button onclick=\"initShop()\" class=\"text-sm font-bold text-slate-500 hover:text-brand-red\">\u2190\n \u304a\u8cb7\u3044\u7269\u306b\u623b\u308b<\/button>\n <\/div>\n <div id=\"order-history-list\" class=\"space-y-6\"><\/div>\n <\/div>\n\n \n <div id=\"shop-screen\" style=\"display: none;\">\n \n <div class=\"p-4 sm:p-8\">\n <div class=\"flex items-end justify-between mb-6\">\n <h2 class=\"text-2xl font-black text-slate-900 tracking-tight\">PRODUCTS<\/h2>\n <span class=\"text-xs text-slate-400 font-medium\">\u5168\u5546\u54c1\u4e00\u89a7<\/span>\n <\/div>\n <div id=\"product-list\" class=\"grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-6\">\n \n <\/div>\n <\/div>\n\n \n <div\n class=\"fixed bottom-6 left-1\/2 transform -translate-x-1\/2 w-[95%] max-w-lg z-40 flex flex-col gap-3 items-center md:left-auto md:right-6 md:translate-x-0 md:w-auto md:items-end md:bottom-8\">\n \n <a href=\"https:\/\/line.me\/R\/ti\/p\/@nakaoka\" target=\"_blank\"\n class=\"bg-[#06C755] text-white px-6 py-3 rounded-full shadow-lg flex items-center justify-center gap-2 w-full md:w-auto hover:opacity-90 transition mb-2\">\n <span class=\"material-icons-outlined text-xl\">chat<\/span>\n <span class=\"font-bold text-sm\">LINE\u3067\u554f\u3044\u5408\u308f\u305b\u308b<\/span>\n <\/a>\n\n \n <button onclick=\"showCheckout()\" id=\"cart-fab\"\n class=\"bg-slate-900 text-white px-6 py-4 rounded-full shadow-2xl flex items-center justify-between w-full md:w-auto md:gap-6 transform hover:scale-105 transition-all duration-300 cursor-pointer hidden\">\n <div class=\"flex items-center gap-3\">\n <div class=\"bg-white text-slate-900 w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm\"\n id=\"cart-count\">0<\/div>\n <span class=\"font-bold tracking-wide text-sm\">\u30ab\u30fc\u30c8\u3092\u78ba\u8a8d<\/span>\n <\/div>\n <span class=\"font-bold text-lg\" id=\"cart-total\">\u00a50<\/span>\n <\/button>\n <\/div>\n\n \n <div id=\"checkout-modal\"\n class=\"fixed inset-0 bg-black\/60 z-50 flex items-center justify-center p-4 backdrop-blur-sm\"\n style=\"display: none;\">\n <div\n class=\"bg-white w-full max-w-lg rounded-xl shadow-2xl overflow-hidden max-h-[90vh] flex flex-col\">\n <div class=\"p-6 bg-slate-900 text-white flex justify-between items-center\">\n <h3 class=\"font-bold tracking-wider\">CONFIRM ORDER<\/h3>\n <button onclick=\"hideCheckout()\" class=\"text-slate-400 hover:text-white\"><span\n class=\"material-icons-outlined\">close<\/span><\/button>\n <\/div>\n <div class=\"p-6 overflow-y-auto flex-1 bg-slate-50\">\n <div id=\"cart-items\" class=\"space-y-4 mb-6\"><\/div>\n <div class=\"bg-white p-4 rounded-lg border border-slate-200 mb-6\">\n <h4 class=\"text-xs font-bold text-slate-400 mb-4\">\u914d\u9001\u5148\u30fb\u8acb\u6c42\u5148\u60c5\u5831<\/h4>\n <div class=\"grid grid-cols-2 gap-4 text-xs mb-4\">\n <div><span class=\"block text-slate-400\">\u30b5\u30ed\u30f3\u540d<\/span><span class=\"font-bold\"\n id=\"confirm-salon\"><\/span><\/div>\n <div><span class=\"block text-slate-400\">\u304a\u540d\u524d<\/span><span class=\"font-bold\"\n id=\"confirm-name\"><\/span><\/div>\n <div class=\"col-span-2\"><span class=\"block text-slate-400\">\u3054\u4f4f\u6240<\/span><span\n class=\"font-bold\" id=\"confirm-address\"><\/span><\/div>\n <\/div>\n\n \n <div id=\"shipping-offer\"\n class=\"bg-slate-50 p-2 rounded text-center text-xs text-slate-600 mb-4\"><\/div>\n\n \n <details class=\"text-[10px] text-slate-500 mb-2 cursor-pointer\">\n <summary class=\"font-bold underline mb-2\">\u9001\u6599\u306b\u3064\u3044\u3066<\/summary>\n <table class=\"w-full text-left\">\n <tr class=\"border-b border-slate-100\">\n <th class=\"py-1\">20,000\u5186\u4ee5\u4e0a<\/th>\n <td class=\"text-right font-bold text-brand-red\">\u7121\u6599<\/td>\n <\/tr>\n <tr class=\"border-b border-slate-100\">\n <th class=\"py-1\">15,000\u5186\u301c<\/th>\n <td class=\"text-right\">\u00a52,200<\/td>\n <\/tr>\n <tr class=\"border-b border-slate-100\">\n <th class=\"py-1\">10,000\u5186\u301c<\/th>\n <td class=\"text-right\">\u00a51,600<\/td>\n <\/tr>\n <tr class=\"border-b border-slate-100\">\n <th class=\"py-1\">5,000\u5186\u301c<\/th>\n <td class=\"text-right\">\u00a51,200<\/td>\n <\/tr>\n <tr>\n <th class=\"py-1\">5,000\u5186\u672a\u6e80<\/th>\n <td class=\"text-right\">\u00a5880<\/td>\n <\/tr>\n <\/table>\n <\/details>\n <\/div>\n <div class=\"space-y-2 mb-2\">\n <div class=\"flex justify-between items-center text-xs text-slate-500\">\n <span>\u5c0f\u8a08 (\u7a0e\u8fbc)<\/span>\n <span class=\"font-bold\" id=\"modal-subtotal\">\u00a50<\/span>\n <\/div>\n <div class=\"flex justify-between items-center text-xs text-slate-500\">\n <span>\u9001\u6599<\/span>\n <span class=\"font-bold\" id=\"modal-shipping\">\u00a50<\/span>\n <\/div>\n <div class=\"flex justify-between items-end border-t border-slate-100 pt-2\">\n <span class=\"text-sm font-bold text-slate-500\">\u5408\u8a08\u91d1\u984d (\u7a0e\u8fbc)<\/span>\n <span class=\"text-3xl font-black text-brand-red\" id=\"modal-total\">\u00a50<\/span>\n <\/div>\n <\/div>\n <\/div>\n <button onclick=\"submitOrder()\"\n class=\"w-full bg-brand-red text-white py-5 font-bold text-lg hover:bg-rose-800 transition tracking-widest flex items-center justify-center gap-2\">\n <span class=\"material-icons-outlined\">shopping_bag<\/span> \u6ce8\u6587\u3092\u78ba\u5b9a\u3059\u308b\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <script>\n \/\/ CONFIGURATION\n const API_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbyTDOKNkDploqfHaOanKauDVuPXRdcpslmDwTgYkVFT_e5Weze9C66tzVM0rv5wg-g\/exec';\n\n \/\/ State\n let products = [];\n let cart = {};\n let currentUser = JSON.parse(localStorage.getItem('nakaoka_user')) || null;\n\n \/\/ Initialization\n document.addEventListener('DOMContentLoaded', () => {\n const urlParams = new URLSearchParams(window.location.search);\n const mode = urlParams.get('mode');\n const token = urlParams.get('token');\n\n if (mode === 'setup' && token) {\n showSetup(token);\n } else if (mode === 'register') {\n showRegister();\n } else if (currentUser) {\n initShop();\n } else {\n showLogin();\n }\n });\n\n \/\/ View Switching\n function showLogin() {\n hideAll();\n document.getElementById('auth-screen').style.display = 'block';\n document.getElementById('login-view').style.display = 'block';\n }\n function showRegister() {\n hideAll();\n document.getElementById('auth-screen').style.display = 'block';\n document.getElementById('register-view').style.display = 'block';\n }\n function showSetup(token) {\n hideAll();\n document.getElementById('auth-screen').style.display = 'block';\n document.getElementById('setup-view').style.display = 'block';\n document.getElementById('setup-token').value = token;\n }\n function showProfileEdit() {\n if (!currentUser) return;\n hideAll();\n document.getElementById('user-nav').style.display = 'flex';\n document.getElementById('profile-edit-view').style.display = 'block';\n document.getElementById('edit-name').value = currentUser.name;\n document.getElementById('edit-salon').value = currentUser.salon;\n document.getElementById('edit-position').value = currentUser.position;\n document.getElementById('edit-address').value = currentUser.address;\n document.getElementById('edit-mobile').value = currentUser.mobile;\n document.getElementById('edit-email-display').textContent = currentUser.email;\n }\n function showOrderHistory() {\n if (!currentUser) return;\n hideAll();\n document.getElementById('user-nav').style.display = 'flex';\n document.getElementById('order-history-view').style.display = 'block';\n fetchOrderHistory();\n }\n function hideAll() {\n const ids = ['auth-screen', 'login-view', 'register-view', 'setup-view', 'shop-screen', 'profile-edit-view', 'order-history-view', 'user-nav'];\n ids.forEach(id => document.getElementById(id).style.display = 'none');\n }\n function logout() {\n if (confirm('\u30ed\u30b0\u30a2\u30a6\u30c8\u3057\u307e\u3059\u304b\uff1f')) {\n localStorage.removeItem('nakaoka_user');\n currentUser = null;\n cart = {};\n showLogin();\n }\n }\n\n function showLoading(show) { document.getElementById('loading').style.display = show ? 'flex' : 'none'; }\n\n \/\/ Auth Actions\n async function handleLogin(e) {\n e.preventDefault();\n const email = document.getElementById('login-email').value;\n const password = document.getElementById('login-password').value;\n\n console.log('Logging in with:', email);\n showLoading(true);\n try {\n const res = await fetch(API_URL, {\n method: 'POST',\n body: JSON.stringify({ action: 'login', email, password })\n }).then(r => r.json());\n\n console.log('Login Response:', res);\n\n if (res.status === 'success') {\n currentUser = res.user;\n localStorage.setItem('nakaoka_user', JSON.stringify(currentUser));\n await initShop(); \/\/ Await added\n } else {\n alert(res.message);\n }\n } catch (err) {\n console.error('Login Error:', err);\n alert('\u901a\u4fe1\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f: ' + err.toString());\n } finally {\n showLoading(false);\n }\n }\n\n async function handleRegister(e) {\n e.preventDefault();\n const fd = new FormData(e.target);\n const data = Object.fromEntries(fd.entries());\n data.action = 'register';\n showLoading(true);\n try {\n const res = await fetch(API_URL, { method: 'POST', body: JSON.stringify(data) }).then(r => r.json());\n alert(res.message);\n if (res.status === 'success') showLogin();\n } catch (err) { alert('\u901a\u4fe1\u30a8\u30e9\u30fc: ' + err.toString()); }\n showLoading(false);\n }\n\n async function handleSetup(e) {\n e.preventDefault();\n const password = document.getElementById('setup-pass').value;\n const confirm = document.getElementById('setup-pass-confirm').value;\n const token = document.getElementById('setup-token').value;\n if (password !== confirm) return alert('\u30d1\u30b9\u30ef\u30fc\u30c9\u304c\u4e00\u81f4\u3057\u307e\u305b\u3093');\n showLoading(true);\n try {\n const res = await fetch(API_URL, { method: 'POST', body: JSON.stringify({ action: 'setup_password', token, password }) }).then(r => r.json());\n alert(res.message);\n if (res.status === 'success') showLogin();\n } catch (err) { alert('\u901a\u4fe1\u30a8\u30e9\u30fc: ' + err.toString()); }\n showLoading(false);\n }\n\n async function handleUpdateProfile(e) {\n e.preventDefault();\n const data = {\n action: 'update_profile',\n id: currentUser.id,\n email: currentUser.email, \/\/ Key\n name: document.getElementById('edit-name').value,\n salon: document.getElementById('edit-salon').value,\n position: document.getElementById('edit-position').value,\n address: document.getElementById('edit-address').value,\n mobile: document.getElementById('edit-mobile').value\n };\n showLoading(true);\n try {\n const res = await fetch(API_URL, { method: 'POST', body: JSON.stringify(data) }).then(r => r.json());\n if (res.status === 'success') {\n currentUser = res.user;\n localStorage.setItem('nakaoka_user', JSON.stringify(currentUser));\n alert('\u60c5\u5831\u3092\u66f4\u65b0\u3057\u307e\u3057\u305f');\n initShop();\n } else {\n alert(res.message);\n }\n } catch (err) { alert('\u901a\u4fe1\u30a8\u30e9\u30fc: ' + err.toString()); }\n showLoading(false);\n }\n\n\n \/\/ Shop Logic\n async function initShop() {\n hideAll();\n document.getElementById('shop-screen').style.display = 'block';\n document.getElementById('user-nav').style.display = 'flex';\n\n if (currentUser) {\n document.getElementById('user-salon-display').textContent = currentUser.salon;\n document.getElementById('user-name-display').textContent = currentUser.name + \" \u69d8\";\n document.getElementById('confirm-salon').textContent = currentUser.salon;\n document.getElementById('confirm-name').textContent = currentUser.name;\n document.getElementById('confirm-address').textContent = currentUser.address;\n }\n\n if (products.length === 0) {\n showLoading(true);\n try {\n const response = await fetch(API_URL, { method: 'POST', body: JSON.stringify({ action: 'get_products' }) });\n const res = await response.json();\n if (res.status === 'success') {\n products = res.products;\n renderProducts();\n } else {\n alert('\u5546\u54c1\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f: ' + res.message);\n }\n } catch (err) {\n console.error(err);\n alert('\u901a\u4fe1\u30a8\u30e9\u30fc: ' + err.toString());\n } finally {\n showLoading(false);\n }\n } else {\n renderProducts();\n }\n }\n\n function renderProducts() {\n const container = document.getElementById('product-list');\n if (products.length === 0) {\n container.innerHTML = '<p class=\"col-span-3 text-center text-slate-400 py-10\">\u5546\u54c1\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3067\u3057\u305f\u3002<br>\u30b9\u30d7\u30ec\u30c3\u30c9\u30b7\u30fc\u30c8\u306e\u300c\u5546\u54c1\u7ba1\u7406\u300d\u30b7\u30fc\u30c8\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>';\n return;\n }\n\n container.innerHTML = products.map((p, index) => {\n const categoryHtml = p.category\n ? `<span class=\"absolute top-2 left-2 bg-slate-900\/80 text-[8px] md:text-[10px] text-white px-2 py-0.5 rounded-sm backdrop-blur-sm z-10 tracking-widest\">${p.category}<\/span>`\n : '';\n\n const price = parseInt(p.price);\n const discountPrice = parseInt(p.discount_price);\n const off = Math.round((1 - discountPrice \/ price) * 100);\n\n return `\n <div class=\"bg-white rounded-lg shadow-sm border border-slate-100 overflow-hidden group flex flex-col relative w-full transform transition-all duration-300 hover:shadow-md\">\n ${categoryHtml}\n <div class=\"aspect-square bg-slate-100 relative overflow-hidden\">\n <img decoding=\"async\" src=\"${p.image || 'https:\/\/placehold.co\/400?text=No+Image'}\" class=\"w-full h-full object-cover\">\n <\/div>\n <div class=\"p-3 flex flex-col flex-1\">\n <h3 class=\"font-bold text-xs md:text-sm text-slate-800 leading-tight mb-1 h-8 md:h-10 overflow-hidden line-clamp-2\">${p.name}<\/h3>\n <div class=\"mt-auto\">\n <div class=\"flex items-baseline gap-2 mb-1\">\n <span class=\"text-[10px] text-slate-400 line-through\">\u00a5${price.toLocaleString()}<\/span>\n <span class=\"text-xs text-brand-red font-bold\">-${off}%<\/span>\n <\/div>\n <div class=\"flex items-end justify-between\">\n <span class=\"text-sm md:text-lg font-black text-brand-red\">\u00a5${discountPrice.toLocaleString()}<\/span>\n <div class=\"flex items-center gap-2\">\n ${cart[index] ?\n `<div class=\"flex items-center bg-slate-100 rounded-full h-6 md:h-7 px-1\">\n <button onclick=\"removeFromCart(${index})\" class=\"w-6 md:w-7 h-full flex items-center justify-center text-slate-500 font-bold hover:text-red-500\">-<\/button>\n <span class=\"text-xs md:text-sm font-bold w-4 text-center\">${cart[index].qty}<\/span>\n <button onclick=\"addToCart(${index})\" class=\"w-6 md:w-7 h-full flex items-center justify-center text-slate-500 font-bold hover:text-green-600\">+<\/button>\n <\/div>`\n :\n `<button onclick=\"addToCart(${index})\" class=\"bg-slate-900 text-white w-6 h-6 md:w-7 md:h-7 rounded-full flex items-center justify-center hover:bg-brand-red transition shadow-lg text-[10px] md:text-xs\">\n <span class=\"material-icons-outlined text-[14px]\">add<\/span>\n <\/button>`\n }\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n `;\n }).join('');\n }\n\n function addToCart(index) {\n if (!cart[index]) {\n cart[index] = { ...products[index], qty: 0 };\n }\n cart[index].qty++;\n updateCartDisplay();\n }\n\n function removeFromCart(index) {\n if (!cart[index]) return;\n cart[index].qty--;\n if (cart[index].qty <= 0) delete cart[index];\n updateCartDisplay();\n }\n\n function updateCartDisplay() {\n renderProducts(); \/\/ Re-render to show qty controls can toggle\n const totalQty = Object.values(cart).reduce((sum, item) => sum + item.qty, 0);\n const active = totalQty > 0;\n\n const fab = document.getElementById('cart-fab');\n fab.style.display = active ? 'flex' : 'none';\n\n if (active) {\n document.getElementById('cart-count').textContent = totalQty;\n const subtotal = Object.values(cart).reduce((sum, item) => sum + (item.discount_price * item.qty), 0);\n\n \/\/ Shipping Calculation\n let shipping = 0;\n if (subtotal >= 20000) shipping = 0;\n else if (subtotal >= 15000) shipping = 2200;\n else if (subtotal >= 10000) shipping = 1600;\n else if (subtotal >= 5000) shipping = 1200;\n else shipping = 880;\n\n document.getElementById('cart-total').textContent = '\u00a5' + (subtotal + shipping).toLocaleString();\n document.getElementById('modal-subtotal').textContent = '\u00a5' + subtotal.toLocaleString();\n document.getElementById('modal-shipping').textContent = '\u00a5' + shipping.toLocaleString();\n document.getElementById('modal-total').textContent = '\u00a5' + (subtotal + shipping).toLocaleString();\n\n \/\/ Free Shipping Offer\n const offerEl = document.getElementById('shipping-offer');\n if (shipping === 0) {\n offerEl.innerHTML = '<span class=\"text-brand-red font-bold\">\ud83c\udf89 \u9001\u6599\u7121\u6599\u3067\u3059\uff01<\/span>';\n } else {\n const diff = 20000 - subtotal;\n offerEl.innerHTML = `\u3042\u3068 <span class=\"text-brand-red font-bold\">\u00a5${diff.toLocaleString()}<\/span> \u3067<span class=\"font-bold\">\u9001\u6599\u7121\u6599<\/span>\uff01`;\n }\n }\n }\n\n function showCheckout() {\n const itemsDiv = document.getElementById('cart-items');\n itemsDiv.innerHTML = Object.keys(cart).map(index => {\n const item = cart[index];\n return `\n <div class=\"flex justify-between items-center py-3 border-b border-slate-100 last:border-0\">\n <div class=\"flex-1\">\n <p class=\"text-xs font-bold text-slate-800 mb-1\">${item.name}<\/p>\n <div class=\"flex items-center gap-3\">\n <p class=\"text-[10px] text-brand-red font-bold\">\u00a5${item.discount_price.toLocaleString()}<\/p>\n \n <div class=\"flex items-center bg-slate-100 rounded-full h-6 px-1\">\n <button onclick=\"updateModalQty('${index}', -1)\" class=\"w-6 h-full flex items-center justify-center text-slate-500 font-bold hover:text-red-500 text-xs\">-<\/button>\n <span class=\"text-xs font-bold w-6 text-center\">${item.qty}<\/span>\n <button onclick=\"updateModalQty('${index}', 1)\" class=\"w-6 h-full flex items-center justify-center text-slate-500 font-bold hover:text-green-600 text-xs\">+<\/button>\n <\/div>\n <\/div>\n <\/div>\n <p class=\"font-bold text-sm\">\u00a5${(item.discount_price * item.qty).toLocaleString()}<\/p>\n <\/div>\n `}).join('');\n document.getElementById('checkout-modal').style.display = 'flex';\n }\n\n \/\/ Wrapper for modal interaction\n function updateModalQty(index, change) {\n if (!cart[index]) return;\n\n if (change > 0) {\n cart[index].qty++;\n } else {\n cart[index].qty--;\n if (cart[index].qty <= 0) delete cart[index];\n }\n\n updateCartDisplay(); \/\/ Update background\n\n \/\/ If cart is empty, close modal\n if (Object.keys(cart).length === 0) {\n hideCheckout();\n return;\n }\n\n showCheckout(); \/\/ Refresh modal content\n }\n\n function hideCheckout() {\n document.getElementById('checkout-modal').style.display = 'none';\n }\n\n async function submitOrder() {\n if (!currentUser) return alert('\u30a8\u30e9\u30fc\uff1a\u30ed\u30b0\u30a4\u30f3\u3057\u3066\u304f\u3060\u3055\u3044');\n if (Object.keys(cart).length === 0) return alert('\u30ab\u30fc\u30c8\u304c\u7a7a\u3067\u3059');\n\n const subtotal = Object.values(cart).reduce((sum, item) => sum + (item.discount_price * item.qty), 0);\n let shipping = 0;\n if (subtotal >= 20000) shipping = 0;\n else if (subtotal >= 15000) shipping = 2200;\n else if (subtotal >= 10000) shipping = 1600;\n else if (subtotal >= 5000) shipping = 1200;\n else shipping = 880;\n\n const total = subtotal + shipping;\n\n \/\/ Backend expects 'items' as an ARRAY \n const submitItems = Object.values(cart).map(i => ({\n name: i.name,\n qty: i.qty\n }));\n\n \/\/ Add shipping as an item for clarity \n if (shipping > 0) {\n submitItems.push({ name: '\u9001\u6599', qty: 1 });\n }\n\n showLoading(true);\n try {\n const res = await fetch(API_URL, {\n method: 'POST',\n body: JSON.stringify({\n action: 'place_order',\n user: currentUser,\n items: submitItems,\n total: total\n })\n }).then(r => r.json());\n\n if (res.status === 'success') {\n alert('\u6ce8\u6587\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\uff01\\n\\n\u3054\u767b\u9332\u306e\u643a\u5e2f\u96fb\u8a71\u756a\u53f7\u3078\u30b7\u30e7\u30fc\u30c8\u30e1\u30c3\u30bb\u30fc\u30b8\uff08SMS\uff09\u306b\u3066\u6c7a\u6e08URL\u3092\u304a\u9001\u308a\u3057\u307e\u3059\u3002\\n\u304a\u652f\u6255\u3044\u306e\u78ba\u8a8d\u304c\u3067\u304d\u6b21\u7b2c\u3001\u5546\u54c1\u3092\u767a\u9001\u3044\u305f\u3057\u307e\u3059\u3002');\n cart = {};\n updateCartDisplay();\n hideCheckout();\n } else {\n alert('\u6ce8\u6587\u30a8\u30e9\u30fc: ' + res.message);\n }\n } catch (err) {\n alert('\u901a\u4fe1\u30a8\u30e9\u30fc: ' + err.toString());\n } finally {\n showLoading(false);\n }\n }\n\n async function fetchOrderHistory() {\n showLoading(true);\n try {\n const res = await fetch(API_URL, {\n method: 'POST',\n body: JSON.stringify({ action: 'get_order_history', email: currentUser.email })\n }).then(r => r.json());\n\n if (res.status === 'success') {\n const container = document.getElementById('order-history-list');\n if (res.orders.length === 0) {\n container.innerHTML = '<p class=\"text-center text-slate-400 py-10\">\u8cfc\u5165\u5c65\u6b74\u306f\u3042\u308a\u307e\u305b\u3093<\/p>';\n } else {\n container.innerHTML = res.orders.map(order => {\n const date = new Date(order.date).toLocaleDateString('ja-JP');\n return `\n <div class=\"bg-white p-6 rounded-xl shadow-soft border border-slate-100\">\n <div class=\"flex justify-between items-start mb-4 pb-4 border-b border-slate-50\">\n <div>\n <p class=\"text-[10px] text-slate-400 font-bold uppercase tracking-wider mb-1\">ORDER ID: ${order.orderId.substring(0, 8)}...<\/p>\n <p class=\"text-sm font-bold text-slate-800\">${date}<\/p>\n <\/div>\n <div class=\"text-right\">\n <p class=\"text-xl font-black text-brand-red\">\u00a5${order.total.toLocaleString()}<\/p>\n <span class=\"text-[10px] bg-slate-100 text-slate-500 px-2 py-1 rounded font-bold\">${order.status}<\/span>\n <\/div>\n <\/div>\n <div class=\"bg-slate-50 rounded-lg p-4\">\n <p class=\"text-xs text-slate-600 leading-relaxed font-medium whitespace-pre-wrap\">${order.items}<\/p>\n <\/div>\n <\/div>`;\n }).join('');\n }\n } else {\n alert('\u5c65\u6b74\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f: ' + res.message);\n }\n } catch (err) { alert('\u901a\u4fe1\u30a8\u30e9\u30fc: ' + err.toString()); }\n showLoading(false);\n }\n <\/script>\n<\/body>\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>NAKAOKA B2B ORDER \u8cfc\u5165\u5c65\u6b74 \u60c5\u5831\u5909\u66f4 \u30ed\u30b0\u30a2\u30a6\u30c8 PROCESSING MEMBER LOGIN \u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9 \u30d1\u30b9\u30ef\u30fc\u30c9 \u30ed\u30b0\u30a4\u30f3 \u65b0\u898f\u4f1a\u54e1\u767b\u9332 \u30a2\u30ab\u30a6\u30f3\u30c8\u3092\u304a\u6301\u3061\u3067\u306a\u3044\u65b9\u306f\u3053\u3061\u3089 \u65b0\u898f\u767b\u9332\u3059\u308b N […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-31","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/b-pilot.jp\/index.php?rest_route=\/wp\/v2\/pages\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/b-pilot.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/b-pilot.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/b-pilot.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b-pilot.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=31"}],"version-history":[{"count":34,"href":"https:\/\/b-pilot.jp\/index.php?rest_route=\/wp\/v2\/pages\/31\/revisions"}],"predecessor-version":[{"id":117,"href":"https:\/\/b-pilot.jp\/index.php?rest_route=\/wp\/v2\/pages\/31\/revisions\/117"}],"wp:attachment":[{"href":"https:\/\/b-pilot.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":31,"date":"2026-02-06T01:50:56","date_gmt":"2026-02-05T16:50:56","guid":{"rendered":"https:\/\/b-pilot.jp\/?page_id=31"},"modified":"2026-02-08T23:50:26","modified_gmt":"2026-02-08T14:50:26","slug":"ec%e3%82%b7%e3%82%b9%e3%83%86%e3%83%a0","status":"publish","type":"page","link":"https:\/\/b-pilot.jp\/?page_id=31","title":{"rendered":"EC\u30b7\u30b9\u30c6\u30e0"},"content":{"rendered":"\n\n\n\n\n \n \n NAKAOKA B2B ORDER<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n brand: {\n red: \"#D32F2F\",\n black: \"#333333\",\n }\n },\n fontFamily: {\n sans: ['\"Noto Sans JP\"', \"sans-serif\"],\n },\n boxShadow: {\n 'soft': '0 4px 20px -2px rgba(0, 0, 0, 0.05)',\n }\n }\n }\n }\n <\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap\"\n rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons+Outlined\" rel=\"stylesheet\">\n\n <style>\n body {\n font-family: 'Noto Sans JP', sans-serif;\n -webkit-font-smoothing: antialiased;\n background-color: #f8fafc;\n }\n\n .glass-header {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border-bottom: 1px solid rgba(226, 232, 240, 0.8);\n }\n\n .spinner {\n border: 3px solid rgba(226, 232, 240, 0.3);\n border-left-color: #D32F2F;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n animation: spin 1s linear infinite;\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n\n \/* Mobile optimization *\/\n input,\n select,\n textarea {\n font-size: 16px !important;\n }\n\n \/* Prevent zoom on iOS *\/\n html,\n body {\n overflow-x: hidden;\n width: 100%;\n }\n\n \/* WordPress Theme Overrides - Hide Footer & Header *\/\n .wp-site-blocks>footer,\n .wp-block-template-part,\n footer[class*=\"wp-block-\"],\n .site-footer,\n #colophon {\n display: none !important;\n }\n\n \/* Ensure app takes full width *\/\n .entry-content,\n .wp-block-post-content {\n max-width: none !important;\n padding: 0 !important;\n margin: 0 !important;\n }\n <\/style>\n<\/head>\n\n<body class=\"text-slate-800\">\n\n <div id=\"nakaoka-app-overlay\" class=\"bg-slate-50 min-h-screen\">\n <div class=\"max-w-5xl mx-auto min-h-screen relative pb-48\">\n\n \n <header\n class=\"glass-header sticky top-0 z-[100] px-4 py-3 flex justify-between items-center transition-all duration-300\">\n \n <div class=\"flex flex-col shrink-0 max-w-[40%]\">\n <div id=\"user-salon-display\" class=\"text-xs font-bold text-slate-900 truncate\"><\/div>\n <div id=\"user-name-display\" class=\"text-[10px] text-slate-500 truncate\"><\/div>\n <\/div>\n\n \n <div id=\"user-nav\" class=\"hidden flex items-center gap-2 shrink-0\">\n <button onclick=\"showOrderHistory()\"\n class=\"text-[10px] sm:text-xs font-bold text-slate-600 bg-slate-100 hover:bg-slate-200 px-2 py-2 rounded transition whitespace-nowrap\">\n \u8cfc\u5165\u5c65\u6b74\n <\/button>\n <button onclick=\"showProfileEdit()\"\n class=\"text-[10px] sm:text-xs font-bold text-slate-600 bg-slate-100 hover:bg-slate-200 px-2 py-2 rounded transition whitespace-nowrap\">\n \u60c5\u5831\u5909\u66f4\n <\/button>\n <button onclick=\"logout()\"\n class=\"text-[10px] sm:text-xs font-bold text-slate-500 hover:text-brand-red px-1 py-2 transition underline decoration-slate-300 underline-offset-4 whitespace-nowrap\">\n \u30ed\u30b0\u30a2\u30a6\u30c8\n <\/button>\n <\/div>\n <\/header>\n\n \n <div id=\"loading\"\n class=\"fixed inset-0 bg-white\/90 z-[9999] flex flex-col items-center justify-center transition-opacity duration-300\"\n style=\"display: none;\">\n <div class=\"spinner mb-4\"><\/div>\n <p class=\"text-brand-red text-xs font-bold tracking-widest animate-pulse\">PROCESSING<\/p>\n <\/div>\n\n \n <div id=\"auth-screen\" class=\"p-4 sm:p-8 max-w-md mx-auto mt-10 sm:mt-20\">\n \n <div id=\"login-view\" class=\"bg-white p-8 rounded-xl border border-slate-200 shadow-xl\">\n <h2 class=\"text-xl font-bold text-center mb-8 text-slate-900 tracking-wider\">MEMBER LOGIN<\/h2>\n <form onsubmit=\"handleLogin(event)\" class=\"space-y-5\">\n <div>\n <label class=\"block text-xs font-bold text-slate-500 mb-1\">\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9<\/label>\n <input type=\"email\" id=\"login-email\" required\n class=\"w-full bg-slate-50 border border-slate-200 p-3 rounded-lg focus:border-brand-red focus:bg-white focus:ring-1 focus:ring-brand-red outline-none transition text-sm\">\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-slate-500 mb-1\">\u30d1\u30b9\u30ef\u30fc\u30c9<\/label>\n <input type=\"password\" id=\"login-password\" required\n class=\"w-full bg-slate-50 border border-slate-200 p-3 rounded-lg focus:border-brand-red focus:bg-white focus:ring-1 focus:ring-brand-red outline-none transition text-sm\">\n <\/div>\n <button type=\"submit\"\n class=\"w-full bg-slate-900 text-white font-bold py-4 rounded-lg hover:bg-brand-red transition-colors duration-300 shadow-lg shadow-slate-200 text-sm tracking-wide\">\u30ed\u30b0\u30a4\u30f3<\/button>\n <\/form>\n <div class=\"mt-8\">\n <div class=\"bg-gray-50 p-5 rounded-xl border border-gray-200 text-center\">\n <h3 class=\"text-sm font-bold text-slate-700 mb-2\">\u65b0\u898f\u4f1a\u54e1\u767b\u9332<\/h3>\n <p class=\"text-[10px] text-slate-400 mb-4\">\u30a2\u30ab\u30a6\u30f3\u30c8\u3092\u304a\u6301\u3061\u3067\u306a\u3044\u65b9\u306f\u3053\u3061\u3089<\/p>\n <button onclick=\"showRegister()\"\n class=\"w-full bg-white text-brand-red border border-brand-red font-bold py-3 rounded-lg hover:bg-brand-red hover:text-white transition-all duration-300 shadow-sm text-sm\">\u65b0\u898f\u767b\u9332\u3059\u308b<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"register-view\" class=\"bg-white p-8 rounded-xl border border-slate-200 shadow-xl\"\n style=\"display: none;\">\n <h2 class=\"text-xl font-bold text-center mb-2 text-slate-900 tracking-wider\">NEW ACCOUNT<\/h2>\n <p class=\"text-xs text-center text-slate-400 mb-8\">\u3054\u767b\u9332\u60c5\u5831\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n <form onsubmit=\"handleRegister(event)\" class=\"space-y-4\">\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u304a\u540d\u524d <span\n class=\"text-red-400\">*<\/span><\/label><input type=\"text\" name=\"name\" required\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u30b5\u30ed\u30f3\u540d <span\n class=\"text-red-400\">*<\/span><\/label><input type=\"text\" name=\"salon\" required\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u5f79\u8077<\/label><input type=\"text\"\n name=\"position\"\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u30b5\u30ed\u30f3\u4f4f\u6240 <span\n class=\"text-red-400\">*<\/span><\/label><input type=\"text\" name=\"address\" required\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u643a\u5e2f\u756a\u53f7 <span\n class=\"text-red-400\">*<\/span><\/label><input type=\"tel\" name=\"mobile\" required\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9 <span\n class=\"text-red-400\">*<\/span><\/label><input type=\"email\" name=\"email\" required\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <button type=\"submit\"\n class=\"w-full bg-brand-red text-white font-bold py-3 mt-6 rounded-lg hover:bg-rose-800 transition shadow-lg shadow-rose-100 text-sm\">\u767b\u9332\u30e1\u30fc\u30eb\u3092\u9001\u4fe1<\/button>\n <button type=\"button\" onclick=\"showLogin()\"\n class=\"w-full text-xs text-slate-400 mt-4 hover:text-slate-600\">\u30ad\u30e3\u30f3\u30bb\u30eb<\/button>\n <\/form>\n <\/div>\n\n \n <div id=\"setup-view\" class=\"bg-white p-8 rounded-xl border border-slate-200 shadow-xl\"\n style=\"display: none;\">\n <h2 class=\"text-xl font-bold text-center mb-8 text-slate-900 tracking-wider\">PASSWORD SETUP<\/h2>\n <form onsubmit=\"handleSetup(event)\" class=\"space-y-6\">\n <input type=\"hidden\" id=\"setup-token\">\n <div>\n <label class=\"block text-xs font-bold text-slate-500 mb-1\">\u65b0\u3057\u3044\u30d1\u30b9\u30ef\u30fc\u30c9<\/label>\n <input type=\"password\" id=\"setup-pass\" required minlength=\"6\"\n class=\"w-full bg-slate-50 border border-slate-200 p-3 rounded-lg focus:border-brand-red focus:bg-white outline-none transition text-sm\">\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-slate-500 mb-1\">\u30d1\u30b9\u30ef\u30fc\u30c9\uff08\u78ba\u8a8d\u7528\uff09<\/label>\n <input type=\"password\" id=\"setup-pass-confirm\" required minlength=\"6\"\n class=\"w-full bg-slate-50 border border-slate-200 p-3 rounded-lg focus:border-brand-red focus:bg-white outline-none transition text-sm\">\n <\/div>\n <button type=\"submit\"\n class=\"w-full bg-slate-900 text-white font-bold py-4 rounded-lg hover:bg-slate-700 transition shadow-lg text-sm\">\u8a2d\u5b9a\u3092\u5b8c\u4e86\u3059\u308b<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n \n <div id=\"profile-edit-view\" class=\"p-4 sm:p-8 max-w-md mx-auto mt-10\" style=\"display: none;\">\n <div class=\"bg-white p-8 rounded-xl shadow-soft\">\n <h2 class=\"text-xl font-bold text-center mb-8 text-slate-900 tracking-wider\">EDIT PROFILE<\/h2>\n <form onsubmit=\"handleUpdateProfile(event)\" class=\"space-y-4\">\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u304a\u540d\u524d<\/label><input type=\"text\"\n id=\"edit-name\" required\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u30b5\u30ed\u30f3\u540d<\/label><input type=\"text\"\n id=\"edit-salon\" required\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u5f79\u8077<\/label><input type=\"text\"\n id=\"edit-position\"\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u30b5\u30ed\u30f3\u4f4f\u6240<\/label><input type=\"text\"\n id=\"edit-address\" required\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div><label class=\"block text-[10px] font-bold text-slate-400\">\u643a\u5e2f\u756a\u53f7<\/label><input type=\"tel\"\n id=\"edit-mobile\" required\n class=\"w-full border-b border-slate-200 py-2 outline-none focus:border-brand-red transition text-sm\">\n <\/div>\n <div class=\"pt-2\"><label class=\"block text-[10px] font-bold text-slate-300\">\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\n (\u5909\u66f4\u4e0d\u53ef)<\/label>\n <div id=\"edit-email-display\" class=\"text-sm text-slate-500 py-1\"><\/div>\n <\/div>\n <button type=\"submit\"\n class=\"w-full bg-slate-900 text-white font-bold py-3 mt-6 rounded-lg hover:bg-brand-red transition shadow-lg text-sm\">\u5909\u66f4\u3092\u4fdd\u5b58<\/button>\n <button type=\"button\" onclick=\"initShop()\"\n class=\"w-full text-xs text-slate-400 mt-4 hover:text-slate-600\">\u30ad\u30e3\u30f3\u30bb\u30eb<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n \n <div id=\"order-history-view\" class=\"p-4 sm:p-8 max-w-3xl mx-auto mt-10\" style=\"display: none;\">\n <div class=\"flex items-center justify-between mb-8\">\n <h2 class=\"text-2xl font-black text-slate-900 tracking-tight\">ORDER HISTORY<\/h2>\n <button onclick=\"initShop()\" class=\"text-sm font-bold text-slate-500 hover:text-brand-red\">\u2190\n \u304a\u8cb7\u3044\u7269\u306b\u623b\u308b<\/button>\n <\/div>\n <div id=\"order-history-list\" class=\"space-y-6\"><\/div>\n <\/div>\n\n \n <div id=\"shop-screen\" style=\"display: none;\">\n \n <div class=\"p-4 sm:p-8\">\n <div class=\"flex items-end justify-between mb-6\">\n <h2 class=\"text-2xl font-black text-slate-900 tracking-tight\">PRODUCTS<\/h2>\n <span class=\"text-xs text-slate-400 font-medium\">\u5168\u5546\u54c1\u4e00\u89a7<\/span>\n <\/div>\n <div id=\"product-list\" class=\"grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-6\">\n \n <\/div>\n <\/div>\n\n \n <div\n class=\"fixed bottom-6 left-1\/2 transform -translate-x-1\/2 w-[95%] max-w-lg z-40 flex flex-col gap-3 items-center md:left-auto md:right-6 md:translate-x-0 md:w-auto md:items-end md:bottom-8\">\n \n <a href=\"https:\/\/line.me\/R\/ti\/p\/@nakaoka\" target=\"_blank\"\n class=\"bg-[#06C755] text-white px-6 py-3 rounded-full shadow-lg flex items-center justify-center gap-2 w-full md:w-auto hover:opacity-90 transition mb-2\">\n <span class=\"material-icons-outlined text-xl\">chat<\/span>\n <span class=\"font-bold text-sm\">LINE\u3067\u554f\u3044\u5408\u308f\u305b\u308b<\/span>\n <\/a>\n\n \n <button onclick=\"showCheckout()\" id=\"cart-fab\"\n class=\"bg-slate-900 text-white px-6 py-4 rounded-full shadow-2xl flex items-center justify-between w-full md:w-auto md:gap-6 transform hover:scale-105 transition-all duration-300 cursor-pointer hidden\">\n <div class=\"flex items-center gap-3\">\n <div class=\"bg-white text-slate-900 w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm\"\n id=\"cart-count\">0<\/div>\n <span class=\"font-bold tracking-wide text-sm\">\u30ab\u30fc\u30c8\u3092\u78ba\u8a8d<\/span>\n <\/div>\n <span class=\"font-bold text-lg\" id=\"cart-total\">\u00a50<\/span>\n <\/button>\n <\/div>\n\n \n <div id=\"checkout-modal\"\n class=\"fixed inset-0 bg-black\/60 z-50 flex items-center justify-center p-4 backdrop-blur-sm\"\n style=\"display: none;\">\n <div\n class=\"bg-white w-full max-w-lg rounded-xl shadow-2xl overflow-hidden max-h-[90vh] flex flex-col\">\n <div class=\"p-6 bg-slate-900 text-white flex justify-between items-center\">\n <h3 class=\"font-bold tracking-wider\">CONFIRM ORDER<\/h3>\n <button onclick=\"hideCheckout()\" class=\"text-slate-400 hover:text-white\"><span\n class=\"material-icons-outlined\">close<\/span><\/button>\n <\/div>\n <div class=\"p-6 overflow-y-auto flex-1 bg-slate-50\">\n <div id=\"cart-items\" class=\"space-y-4 mb-6\"><\/div>\n <div class=\"bg-white p-4 rounded-lg border border-slate-200 mb-6\">\n <h4 class=\"text-xs font-bold text-slate-400 mb-4\">\u914d\u9001\u5148\u30fb\u8acb\u6c42\u5148\u60c5\u5831<\/h4>\n <div class=\"grid grid-cols-2 gap-4 text-xs mb-4\">\n <div><span class=\"block text-slate-400\">\u30b5\u30ed\u30f3\u540d<\/span><span class=\"font-bold\"\n id=\"confirm-salon\"><\/span><\/div>\n <div><span class=\"block text-slate-400\">\u304a\u540d\u524d<\/span><span class=\"font-bold\"\n id=\"confirm-name\"><\/span><\/div>\n <div class=\"col-span-2\"><span class=\"block text-slate-400\">\u3054\u4f4f\u6240<\/span><span\n class=\"font-bold\" id=\"confirm-address\"><\/span><\/div>\n <\/div>\n\n \n <div id=\"shipping-offer\"\n class=\"bg-slate-50 p-2 rounded text-center text-xs text-slate-600 mb-4\"><\/div>\n\n \n <details class=\"text-[10px] text-slate-500 mb-2 cursor-pointer\">\n <summary class=\"font-bold underline mb-2\">\u9001\u6599\u306b\u3064\u3044\u3066<\/summary>\n <table class=\"w-full text-left\">\n <tr class=\"border-b border-slate-100\">\n <th class=\"py-1\">20,000\u5186\u4ee5\u4e0a<\/th>\n <td class=\"text-right font-bold text-brand-red\">\u7121\u6599<\/td>\n <\/tr>\n <tr class=\"border-b border-slate-100\">\n <th class=\"py-1\">15,000\u5186\u301c<\/th>\n <td class=\"text-right\">\u00a52,200<\/td>\n <\/tr>\n <tr class=\"border-b border-slate-100\">\n <th class=\"py-1\">10,000\u5186\u301c<\/th>\n <td class=\"text-right\">\u00a51,600<\/td>\n <\/tr>\n <tr class=\"border-b border-slate-100\">\n <th class=\"py-1\">5,000\u5186\u301c<\/th>\n <td class=\"text-right\">\u00a51,200<\/td>\n <\/tr>\n <tr>\n <th class=\"py-1\">5,000\u5186\u672a\u6e80<\/th>\n <td class=\"text-right\">\u00a5880<\/td>\n <\/tr>\n <\/table>\n <\/details>\n <\/div>\n <div class=\"space-y-2 mb-2\">\n <div class=\"flex justify-between items-center text-xs text-slate-500\">\n <span>\u5c0f\u8a08 (\u7a0e\u8fbc)<\/span>\n <span class=\"font-bold\" id=\"modal-subtotal\">\u00a50<\/span>\n <\/div>\n <div class=\"flex justify-between items-center text-xs text-slate-500\">\n <span>\u9001\u6599<\/span>\n <span class=\"font-bold\" id=\"modal-shipping\">\u00a50<\/span>\n <\/div>\n <div class=\"flex justify-between items-end border-t border-slate-100 pt-2\">\n <span class=\"text-sm font-bold text-slate-500\">\u5408\u8a08\u91d1\u984d (\u7a0e\u8fbc)<\/span>\n <span class=\"text-3xl font-black text-brand-red\" id=\"modal-total\">\u00a50<\/span>\n <\/div>\n <\/div>\n <\/div>\n <button onclick=\"submitOrder()\"\n class=\"w-full bg-brand-red text-white py-5 font-bold text-lg hover:bg-rose-800 transition tracking-widest flex items-center justify-center gap-2\">\n <span class=\"material-icons-outlined\">shopping_bag<\/span> \u6ce8\u6587\u3092\u78ba\u5b9a\u3059\u308b\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <script>\n \/\/ CONFIGURATION\n const API_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbyTDOKNkDploqfHaOanKauDVuPXRdcpslmDwTgYkVFT_e5Weze9C66tzVM0rv5wg-g\/exec';\n\n \/\/ State\n let products = [];\n let cart = {};\n let currentUser = JSON.parse(localStorage.getItem('nakaoka_user')) || null;\n\n \/\/ Initialization\n document.addEventListener('DOMContentLoaded', () => {\n const urlParams = new URLSearchParams(window.location.search);\n const mode = urlParams.get('mode');\n const token = urlParams.get('token');\n\n if (mode === 'setup' && token) {\n showSetup(token);\n } else if (mode === 'register') {\n showRegister();\n } else if (currentUser) {\n initShop();\n } else {\n showLogin();\n }\n });\n\n \/\/ View Switching\n function showLogin() {\n hideAll();\n document.getElementById('auth-screen').style.display = 'block';\n document.getElementById('login-view').style.display = 'block';\n }\n function showRegister() {\n hideAll();\n document.getElementById('auth-screen').style.display = 'block';\n document.getElementById('register-view').style.display = 'block';\n }\n function showSetup(token) {\n hideAll();\n document.getElementById('auth-screen').style.display = 'block';\n document.getElementById('setup-view').style.display = 'block';\n document.getElementById('setup-token').value = token;\n }\n function showProfileEdit() {\n if (!currentUser) return;\n hideAll();\n document.getElementById('user-nav').style.display = 'flex';\n document.getElementById('profile-edit-view').style.display = 'block';\n document.getElementById('edit-name').value = currentUser.name;\n document.getElementById('edit-salon').value = currentUser.salon;\n document.getElementById('edit-position').value = currentUser.position;\n document.getElementById('edit-address').value = currentUser.address;\n document.getElementById('edit-mobile').value = currentUser.mobile;\n document.getElementById('edit-email-display').textContent = currentUser.email;\n }\n function showOrderHistory() {\n if (!currentUser) return;\n hideAll();\n document.getElementById('user-nav').style.display = 'flex';\n document.getElementById('order-history-view').style.display = 'block';\n fetchOrderHistory();\n }\n function hideAll() {\n const ids = ['auth-screen', 'login-view', 'register-view', 'setup-view', 'shop-screen', 'profile-edit-view', 'order-history-view', 'user-nav'];\n ids.forEach(id => document.getElementById(id).style.display = 'none');\n }\n function logout() {\n if (confirm('\u30ed\u30b0\u30a2\u30a6\u30c8\u3057\u307e\u3059\u304b\uff1f')) {\n localStorage.removeItem('nakaoka_user');\n currentUser = null;\n cart = {};\n showLogin();\n }\n }\n\n function showLoading(show) { document.getElementById('loading').style.display = show ? 'flex' : 'none'; }\n\n \/\/ Auth Actions\n async function handleLogin(e) {\n e.preventDefault();\n const email = document.getElementById('login-email').value;\n const password = document.getElementById('login-password').value;\n\n console.log('Logging in with:', email);\n showLoading(true);\n try {\n const res = await fetch(API_URL, {\n method: 'POST',\n body: JSON.stringify({ action: 'login', email, password })\n }).then(r => r.json());\n\n console.log('Login Response:', res);\n\n if (res.status === 'success') {\n currentUser = res.user;\n localStorage.setItem('nakaoka_user', JSON.stringify(currentUser));\n await initShop(); \/\/ Await added\n } else {\n alert(res.message);\n }\n } catch (err) {\n console.error('Login Error:', err);\n alert('\u901a\u4fe1\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f: ' + err.toString());\n } finally {\n showLoading(false);\n }\n }\n\n async function handleRegister(e) {\n e.preventDefault();\n const fd = new FormData(e.target);\n const data = Object.fromEntries(fd.entries());\n data.action = 'register';\n showLoading(true);\n try {\n const res = await fetch(API_URL, { method: 'POST', body: JSON.stringify(data) }).then(r => r.json());\n alert(res.message);\n if (res.status === 'success') showLogin();\n } catch (err) { alert('\u901a\u4fe1\u30a8\u30e9\u30fc: ' + err.toString()); }\n showLoading(false);\n }\n\n async function handleSetup(e) {\n e.preventDefault();\n const password = document.getElementById('setup-pass').value;\n const confirm = document.getElementById('setup-pass-confirm').value;\n const token = document.getElementById('setup-token').value;\n if (password !== confirm) return alert('\u30d1\u30b9\u30ef\u30fc\u30c9\u304c\u4e00\u81f4\u3057\u307e\u305b\u3093');\n showLoading(true);\n try {\n const res = await fetch(API_URL, { method: 'POST', body: JSON.stringify({ action: 'setup_password', token, password }) }).then(r => r.json());\n alert(res.message);\n if (res.status === 'success') showLogin();\n } catch (err) { alert('\u901a\u4fe1\u30a8\u30e9\u30fc: ' + err.toString()); }\n showLoading(false);\n }\n\n async function handleUpdateProfile(e) {\n e.preventDefault();\n const data = {\n action: 'update_profile',\n id: currentUser.id,\n email: currentUser.email, \/\/ Key\n name: document.getElementById('edit-name').value,\n salon: document.getElementById('edit-salon').value,\n position: document.getElementById('edit-position').value,\n address: document.getElementById('edit-address').value,\n mobile: document.getElementById('edit-mobile').value\n };\n showLoading(true);\n try {\n const res = await fetch(API_URL, { method: 'POST', body: JSON.stringify(data) }).then(r => r.json());\n if (res.status === 'success') {\n currentUser = res.user;\n localStorage.setItem('nakaoka_user', JSON.stringify(currentUser));\n alert('\u60c5\u5831\u3092\u66f4\u65b0\u3057\u307e\u3057\u305f');\n initShop();\n } else {\n alert(res.message);\n }\n } catch (err) { alert('\u901a\u4fe1\u30a8\u30e9\u30fc: ' + err.toString()); }\n showLoading(false);\n }\n\n\n \/\/ Shop Logic\n async function initShop() {\n hideAll();\n document.getElementById('shop-screen').style.display = 'block';\n document.getElementById('user-nav').style.display = 'flex';\n\n if (currentUser) {\n document.getElementById('user-salon-display').textContent = currentUser.salon;\n document.getElementById('user-name-display').textContent = currentUser.name + \" \u69d8\";\n document.getElementById('confirm-salon').textContent = currentUser.salon;\n document.getElementById('confirm-name').textContent = currentUser.name;\n document.getElementById('confirm-address').textContent = currentUser.address;\n }\n\n if (products.length === 0) {\n showLoading(true);\n try {\n const response = await fetch(API_URL, { method: 'POST', body: JSON.stringify({ action: 'get_products' }) });\n const res = await response.json();\n if (res.status === 'success') {\n products = res.products;\n renderProducts();\n } else {\n alert('\u5546\u54c1\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f: ' + res.message);\n }\n } catch (err) {\n console.error(err);\n alert('\u901a\u4fe1\u30a8\u30e9\u30fc: ' + err.toString());\n } finally {\n showLoading(false);\n }\n } else {\n renderProducts();\n }\n }\n\n function renderProducts() {\n const container = document.getElementById('product-list');\n if (products.length === 0) {\n container.innerHTML = '<p class=\"col-span-3 text-center text-slate-400 py-10\">\u5546\u54c1\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3067\u3057\u305f\u3002<br>\u30b9\u30d7\u30ec\u30c3\u30c9\u30b7\u30fc\u30c8\u306e\u300c\u5546\u54c1\u7ba1\u7406\u300d\u30b7\u30fc\u30c8\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>';\n return;\n }\n\n container.innerHTML = products.map((p, index) => {\n const categoryHtml = p.category\n ? `<span class=\"absolute top-2 left-2 bg-slate-900\/80 text-[8px] md:text-[10px] text-white px-2 py-0.5 rounded-sm backdrop-blur-sm z-10 tracking-widest\">${p.category}<\/span>`\n : '';\n\n const price = parseInt(p.price);\n const discountPrice = parseInt(p.discount_price);\n const off = Math.round((1 - discountPrice \/ price) * 100);\n\n return `\n <div class=\"bg-white rounded-lg shadow-sm border border-slate-100 overflow-hidden group flex flex-col relative w-full transform transition-all duration-300 hover:shadow-md\">\n ${categoryHtml}\n <div class=\"aspect-square bg-slate-100 relative overflow-hidden\">\n <img decoding=\"async\" src=\"${p.image || 'https:\/\/placehold.co\/400?text=No+Image'}\" class=\"w-full h-full object-cover\">\n <\/div>\n <div class=\"p-3 flex flex-col flex-1\">\n <h3 class=\"font-bold text-xs md:text-sm text-slate-800 leading-tight mb-1 h-8 md:h-10 overflow-hidden line-clamp-2\">${p.name}<\/h3>\n <div class=\"mt-auto\">\n <div class=\"flex items-baseline gap-2 mb-1\">\n <span class=\"text-[10px] text-slate-400 line-through\">\u00a5${price.toLocaleString()}<\/span>\n <span class=\"text-xs text-brand-red font-bold\">-${off}%<\/span>\n <\/div>\n <div class=\"flex items-end justify-between\">\n <span class=\"text-sm md:text-lg font-black text-brand-red\">\u00a5${discountPrice.toLocaleString()}<\/span>\n <div class=\"flex items-center gap-2\">\n ${cart[index] ?\n `<div class=\"flex items-center bg-slate-100 rounded-full h-6 md:h-7 px-1\">\n <button onclick=\"removeFromCart(${index})\" class=\"w-6 md:w-7 h-full flex items-center justify-center text-slate-500 font-bold hover:text-red-500\">-<\/button>\n <span class=\"text-xs md:text-sm font-bold w-4 text-center\">${cart[index].qty}<\/span>\n <button onclick=\"addToCart(${index})\" class=\"w-6 md:w-7 h-full flex items-center justify-center text-slate-500 font-bold hover:text-green-600\">+<\/button>\n <\/div>`\n :\n `<button onclick=\"addToCart(${index})\" class=\"bg-slate-900 text-white w-6 h-6 md:w-7 md:h-7 rounded-full flex items-center justify-center hover:bg-brand-red transition shadow-lg text-[10px] md:text-xs\">\n <span class=\"material-icons-outlined text-[14px]\">add<\/span>\n <\/button>`\n }\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n `;\n }).join('');\n }\n\n function addToCart(index) {\n if (!cart[index]) {\n cart[index] = { ...products[index], qty: 0 };\n }\n cart[index].qty++;\n updateCartDisplay();\n }\n\n function removeFromCart(index) {\n if (!cart[index]) return;\n cart[index].qty--;\n if (cart[index].qty <= 0) delete cart[index];\n updateCartDisplay();\n }\n\n function updateCartDisplay() {\n renderProducts(); \/\/ Re-render to show qty controls can toggle\n const totalQty = Object.values(cart).reduce((sum, item) => sum + item.qty, 0);\n const active = totalQty > 0;\n\n const fab = document.getElementById('cart-fab');\n fab.style.display = active ? 'flex' : 'none';\n\n if (active) {\n document.getElementById('cart-count').textContent = totalQty;\n const subtotal = Object.values(cart).reduce((sum, item) => sum + (item.discount_price * item.qty), 0);\n\n \/\/ Shipping Calculation\n let shipping = 0;\n if (subtotal >= 20000) shipping = 0;\n else if (subtotal >= 15000) shipping = 2200;\n else if (subtotal >= 10000) shipping = 1600;\n else if (subtotal >= 5000) shipping = 1200;\n else shipping = 880;\n\n document.getElementById('cart-total').textContent = '\u00a5' + (subtotal + shipping).toLocaleString();\n document.getElementById('modal-subtotal').textContent = '\u00a5' + subtotal.toLocaleString();\n document.getElementById('modal-shipping').textContent = '\u00a5' + shipping.toLocaleString();\n document.getElementById('modal-total').textContent = '\u00a5' + (subtotal + shipping).toLocaleString();\n\n \/\/ Free Shipping Offer\n const offerEl = document.getElementById('shipping-offer');\n if (shipping === 0) {\n offerEl.innerHTML = '<span class=\"text-brand-red font-bold\">\ud83c\udf89 \u9001\u6599\u7121\u6599\u3067\u3059\uff01<\/span>';\n } else {\n const diff = 20000 - subtotal;\n offerEl.innerHTML = `\u3042\u3068 <span class=\"text-brand-red font-bold\">\u00a5${diff.toLocaleString()}<\/span> \u3067<span class=\"font-bold\">\u9001\u6599\u7121\u6599<\/span>\uff01`;\n }\n }\n }\n\n function showCheckout() {\n const itemsDiv = document.getElementById('cart-items');\n itemsDiv.innerHTML = Object.keys(cart).map(index => {\n const item = cart[index];\n return `\n <div class=\"flex justify-between items-center py-3 border-b border-slate-100 last:border-0\">\n <div class=\"flex-1\">\n <p class=\"text-xs font-bold text-slate-800 mb-1\">${item.name}<\/p>\n <div class=\"flex items-center gap-3\">\n <p class=\"text-[10px] text-brand-red font-bold\">\u00a5${item.discount_price.toLocaleString()}<\/p>\n \n <div class=\"flex items-center bg-slate-100 rounded-full h-6 px-1\">\n <button onclick=\"updateModalQty('${index}', -1)\" class=\"w-6 h-full flex items-center justify-center text-slate-500 font-bold hover:text-red-500 text-xs\">-<\/button>\n <span class=\"text-xs font-bold w-6 text-center\">${item.qty}<\/span>\n <button onclick=\"updateModalQty('${index}', 1)\" class=\"w-6 h-full flex items-center justify-center text-slate-500 font-bold hover:text-green-600 text-xs\">+<\/button>\n <\/div>\n <\/div>\n <\/div>\n <p class=\"font-bold text-sm\">\u00a5${(item.discount_price * item.qty).toLocaleString()}<\/p>\n <\/div>\n `}).join('');\n document.getElementById('checkout-modal').style.display = 'flex';\n }\n\n \/\/ Wrapper for modal interaction\n function updateModalQty(index, change) {\n if (!cart[index]) return;\n\n if (change > 0) {\n cart[index].qty++;\n } else {\n cart[index].qty--;\n if (cart[index].qty <= 0) delete cart[index];\n }\n\n updateCartDisplay(); \/\/ Update background\n\n \/\/ If cart is empty, close modal\n if (Object.keys(cart).length === 0) {\n hideCheckout();\n return;\n }\n\n showCheckout(); \/\/ Refresh modal content\n }\n\n function hideCheckout() {\n document.getElementById('checkout-modal').style.display = 'none';\n }\n\n async function submitOrder() {\n if (!currentUser) return alert('\u30a8\u30e9\u30fc\uff1a\u30ed\u30b0\u30a4\u30f3\u3057\u3066\u304f\u3060\u3055\u3044');\n if (Object.keys(cart).length === 0) return alert('\u30ab\u30fc\u30c8\u304c\u7a7a\u3067\u3059');\n\n const subtotal = Object.values(cart).reduce((sum, item) => sum + (item.discount_price * item.qty), 0);\n let shipping = 0;\n if (subtotal >= 20000) shipping = 0;\n else if (subtotal >= 15000) shipping = 2200;\n else if (subtotal >= 10000) shipping = 1600;\n else if (subtotal >= 5000) shipping = 1200;\n else shipping = 880;\n\n const total = subtotal + shipping;\n\n \/\/ Backend expects 'items' as an ARRAY \n const submitItems = Object.values(cart).map(i => ({\n name: i.name,\n qty: i.qty\n }));\n\n \/\/ Add shipping as an item for clarity \n if (shipping > 0) {\n submitItems.push({ name: '\u9001\u6599', qty: 1 });\n }\n\n showLoading(true);\n try {\n const res = await fetch(API_URL, {\n method: 'POST',\n body: JSON.stringify({\n action: 'place_order',\n user: currentUser,\n items: submitItems,\n total: total\n })\n }).then(r => r.json());\n\n if (res.status === 'success') {\n alert('\u6ce8\u6587\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\uff01\\n\\n\u3054\u767b\u9332\u306e\u643a\u5e2f\u96fb\u8a71\u756a\u53f7\u3078\u30b7\u30e7\u30fc\u30c8\u30e1\u30c3\u30bb\u30fc\u30b8\uff08SMS\uff09\u306b\u3066\u6c7a\u6e08URL\u3092\u304a\u9001\u308a\u3057\u307e\u3059\u3002\\n\u304a\u652f\u6255\u3044\u306e\u78ba\u8a8d\u304c\u3067\u304d\u6b21\u7b2c\u3001\u5546\u54c1\u3092\u767a\u9001\u3044\u305f\u3057\u307e\u3059\u3002');\n cart = {};\n updateCartDisplay();\n hideCheckout();\n } else {\n alert('\u6ce8\u6587\u30a8\u30e9\u30fc: ' + res.message);\n }\n } catch (err) {\n alert('\u901a\u4fe1\u30a8\u30e9\u30fc: ' + err.toString());\n } finally {\n showLoading(false);\n }\n }\n\n async function fetchOrderHistory() {\n showLoading(true);\n try {\n const res = await fetch(API_URL, {\n method: 'POST',\n body: JSON.stringify({ action: 'get_order_history', email: currentUser.email })\n }).then(r => r.json());\n\n if (res.status === 'success') {\n const container = document.getElementById('order-history-list');\n if (res.orders.length === 0) {\n container.innerHTML = '<p class=\"text-center text-slate-400 py-10\">\u8cfc\u5165\u5c65\u6b74\u306f\u3042\u308a\u307e\u305b\u3093<\/p>';\n } else {\n container.innerHTML = res.orders.map(order => {\n const date = new Date(order.date).toLocaleDateString('ja-JP');\n return `\n <div class=\"bg-white p-6 rounded-xl shadow-soft border border-slate-100\">\n <div class=\"flex justify-between items-start mb-4 pb-4 border-b border-slate-50\">\n <div>\n <p class=\"text-[10px] text-slate-400 font-bold uppercase tracking-wider mb-1\">ORDER ID: ${order.orderId.substring(0, 8)}...<\/p>\n <p class=\"text-sm font-bold text-slate-800\">${date}<\/p>\n <\/div>\n <div class=\"text-right\">\n <p class=\"text-xl font-black text-brand-red\">\u00a5${order.total.toLocaleString()}<\/p>\n <span class=\"text-[10px] bg-slate-100 text-slate-500 px-2 py-1 rounded font-bold\">${order.status}<\/span>\n <\/div>\n <\/div>\n <div class=\"bg-slate-50 rounded-lg p-4\">\n <p class=\"text-xs text-slate-600 leading-relaxed font-medium whitespace-pre-wrap\">${order.items}<\/p>\n <\/div>\n <\/div>`;\n }).join('');\n }\n } else {\n alert('\u5c65\u6b74\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f: ' + res.message);\n }\n } catch (err) { alert('\u901a\u4fe1\u30a8\u30e9\u30fc: ' + err.toString()); }\n showLoading(false);\n }\n <\/script>\n<\/body>\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>NAKAOKA B2B ORDER \u8cfc\u5165\u5c65\u6b74 \u60c5\u5831\u5909\u66f4 \u30ed\u30b0\u30a2\u30a6\u30c8 PROCESSING MEMBER LOGIN \u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9 \u30d1\u30b9\u30ef\u30fc\u30c9 \u30ed\u30b0\u30a4\u30f3 \u65b0\u898f\u4f1a\u54e1\u767b\u9332 \u30a2\u30ab\u30a6\u30f3\u30c8\u3092\u304a\u6301\u3061\u3067\u306a\u3044\u65b9\u306f\u3053\u3061\u3089 \u65b0\u898f\u767b\u9332\u3059\u308b N […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-31","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/b-pilot.jp\/index.php?rest_route=\/wp\/v2\/pages\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/b-pilot.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/b-pilot.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/b-pilot.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b-pilot.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=31"}],"version-history":[{"count":34,"href":"https:\/\/b-pilot.jp\/index.php?rest_route=\/wp\/v2\/pages\/31\/revisions"}],"predecessor-version":[{"id":117,"href":"https:\/\/b-pilot.jp\/index.php?rest_route=\/wp\/v2\/pages\/31\/revisions\/117"}],"wp:attachment":[{"href":"https:\/\/b-pilot.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}