Prenota il tuo ordine<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\n:root{\n --blu:#1a3a6e;--blu2:#1d56c7;--blu3:#3b82f6;--blu-l:#eff6ff;\n --oro:#c9a84c;--oro2:#f0d080;--bg:#f0f4fa;--card:#fff;\n --testo:#1a2540;--sub:#5a6a85;--border:#dde4f0;\n --r:16px;--sh:0 4px 32px rgba(26,58,110,.12);\n}\nhtml,body{min-height:100%;font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--testo)}\ninput,select,textarea,button{font-family:'DM Sans',sans-serif}\ninput:focus,select:focus,textarea:focus{outline:none;border-color:var(--blu2)!important;box-shadow:0 0 0 3px rgba(29,86,199,.13)}\n@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}\n@keyframes popIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}\n@keyframes spin{to{transform:rotate(360deg)}}\n@keyframes checkmark{0%{stroke-dashoffset:50}100%{stroke-dashoffset:0}}\n.ani{animation:fadeUp .35s ease both}\n\n\/* \u2500\u2500 HERO \u2500\u2500 *\/\n.hero{background:linear-gradient(135deg,#0e2552 0%,#1a3a6e 45%,#1d56c7 100%);padding:36px 20px 48px;text-align:center;position:relative;overflow:hidden}\n.hero::before{content:\"\";position:absolute;inset:0;background:url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\")}\n.hero-icon{font-size:44px;margin-bottom:14px;display:block}\n.hero-title{font-family:'Cormorant Garamond',serif;color:#fff;font-size:28px;font-weight:700;line-height:1.2;margin-bottom:8px}\n.hero-sub{color:rgba(255,255,255,.65);font-size:15px;font-weight:300;max-width:320px;margin:0 auto}\n.hero-azienda{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:5px 16px;font-size:12px;color:rgba(255,255,255,.8);letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}\n\n\/* \u2500\u2500 WRAPPER \u2500\u2500 *\/\n.wrap{max-width:580px;margin:0 auto;padding:0 16px 60px}\n\n\/* \u2500\u2500 STEPS \u2500\u2500 *\/\n.steps{display:flex;align-items:center;justify-content:center;gap:0;margin:-24px auto 28px;background:var(--card);border-radius:12px;padding:14px 20px;box-shadow:var(--sh);max-width:480px;position:relative;z-index:10}\n.step{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}\n.step-num{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--sub);background:#fff;transition:all .3s}\n.step-num.done{background:var(--blu2);border-color:var(--blu2);color:#fff}\n.step-num.active{background:var(--oro);border-color:var(--oro);color:#0e2552}\n.step-lbl{font-size:10px;color:var(--sub);font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-align:center}\n.step-lbl.active{color:var(--blu2)}\n.step-line{flex:1;height:2px;background:var(--border);margin:0 6px;margin-bottom:14px;transition:background .3s}\n.step-line.done{background:var(--blu2)}\n\n\/* \u2500\u2500 CARD \u2500\u2500 *\/\n.card{background:var(--card);border-radius:var(--r);padding:26px 22px;box-shadow:var(--sh);border:1px solid var(--border);margin-bottom:16px}\n.card-title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:700;color:var(--testo);margin-bottom:18px;display:flex;align-items:center;gap:10px}\n.card-title span{font-size:22px}\n\n\/* \u2500\u2500 FORM FIELDS \u2500\u2500 *\/\n.fg{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}\n.lbl{font-size:11px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.06em}\n.lbl .req{color:#ef4444;margin-left:2px}\n.inp{border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;font-size:15px;color:var(--testo);background:#f8fafc;width:100%;transition:border-color .2s}\n.inp.err{border-color:#ef4444!important;background:#fff1f2}\n.err-msg{color:#ef4444;font-size:12px;margin-top:4px;display:none}\n.inp.err~.err-msg{display:block}\n.toggle-wrap{display:grid;grid-template-columns:1fr 1fr;gap:8px}\n.toggle-btn{border:1.5px solid var(--border);border-radius:10px;padding:12px 0;font-size:14px;font-weight:500;cursor:pointer;background:#f8fafc;color:var(--sub);transition:all .2s;font-family:'DM Sans',sans-serif;text-align:center}\n.toggle-btn.on{background:var(--blu-l);border-color:var(--blu3);color:var(--blu2);font-weight:700}\n\n\/* \u2500\u2500 QUICK PICKER \u2500\u2500 *\/\n.picker-wrap{background:#f8fafc;border:1.5px solid var(--border);border-radius:12px;padding:16px 14px;margin-bottom:14px}\n.qp-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}\n.qp-tab{background:#fff;border:1.5px solid var(--border);border-radius:20px;padding:6px 13px;font-size:12px;font-weight:600;cursor:pointer;color:var(--sub);transition:all .18s;font-family:'DM Sans',sans-serif}\n.qp-tab.on{background:var(--blu2);border-color:var(--blu2);color:#fff}\n.qp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:7px}\n.qp-item{background:#fff;border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;cursor:pointer;transition:all .18s;position:relative;font-size:13px;color:var(--testo);font-weight:500;text-align:left;font-family:'DM Sans',sans-serif;line-height:1.3;width:100%}\n.qp-item:hover{border-color:var(--blu3);background:var(--blu-l);color:var(--blu2)}\n.qp-item.sel{border-color:var(--blu2);background:var(--blu-l);color:var(--blu2);padding-right:26px}\n.qp-item.sel::after{content:\"\u2713\";position:absolute;top:8px;right:9px;font-size:12px;font-weight:700;color:var(--blu2)}\n\n\/* QUANTIT\u00c0 *\/\n.item-qty{display:none;margin-top:8px;flex-direction:column;gap:5px}\n.qp-item.sel .item-qty{display:flex}\n.qty-num{border:1.5px solid #93c5fd;border-radius:7px;padding:6px 9px;font-size:13px;width:100%;background:#fff;color:var(--testo);font-family:'DM Sans',sans-serif;font-weight:600}\n.qty-num:focus{outline:none;border-color:var(--blu2)}\n.qty-units{display:flex;flex-wrap:wrap;gap:4px}\n.qty-unit{border:1.5px solid #bfdbfe;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:var(--blu2);font-family:'DM Sans',sans-serif;transition:all .15s;white-space:nowrap}\n.qty-unit.on{background:var(--blu2);border-color:var(--blu2);color:#fff}\n.qty-unit.libero{border-color:#e2e8f0;color:var(--sub)}\n.qty-unit.libero.on{background:#475569;border-color:#475569;color:#fff}\n.qty-free{border:1.5px solid #e2e8f0;border-radius:7px;padding:5px 9px;font-size:12px;width:100%;background:#fff;color:var(--testo);font-family:'DM Sans',sans-serif;display:none}\n.qty-free.show{display:block}\n\n\/* RIEPILOGO *\/\n.sel-summary{background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;margin-top:12px}\n.sel-sum-title{font-weight:700;color:var(--blu);font-size:11px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}\n.sel-sum-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f1f5f9;gap:10px}\n.sel-sum-row:last-child{border-bottom:none}\n.sel-sum-nome{font-size:13px;font-weight:600;flex:1}\n.sel-sum-qty{color:var(--sub);font-size:12px;margin-right:4px}\n.sel-sum-del{background:none;border:none;color:#94a3b8;cursor:pointer;font-size:15px;padding:0 2px;flex-shrink:0}\n\n\/* \u2500\u2500 BOTTONI \u2500\u2500 *\/\n.btn-pri{width:100%;background:linear-gradient(135deg,var(--blu),var(--blu2));color:#fff;border:none;border-radius:12px;padding:15px;font-size:16px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:10px}\n.btn-pri:active{transform:scale(.98)}\n.btn-pri:disabled{opacity:.6;cursor:not-allowed}\n.btn-sec{width:100%;background:#f1f5f9;color:var(--sub);border:none;border-radius:12px;padding:13px;font-size:15px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;margin-top:10px}\n.btn-sec:active{transform:scale(.98)}\n\n\/* \u2500\u2500 SPINNER \u2500\u2500 *\/\n.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}\n\n\/* \u2500\u2500 SUCCESSO \u2500\u2500 *\/\n.success-screen{text-align:center;padding:40px 20px;animation:popIn .4s ease}\n.success-circle{width:80px;height:80px;background:linear-gradient(135deg,#16a34a,#22c55e);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 8px 24px rgba(22,163,74,.3)}\n.success-circle svg{width:40px;height:40px}\n.success-circle svg path{stroke:#fff;stroke-width:3;fill:none;stroke-dasharray:50;stroke-dashoffset:50;animation:checkmark .5s ease .3s forwards}\n.success-title{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:700;color:var(--testo);margin-bottom:10px}\n.success-sub{color:var(--sub);font-size:15px;line-height:1.6;margin-bottom:6px}\n.success-box{background:var(--blu-l);border:1px solid #bfdbfe;border-radius:12px;padding:16px 18px;margin:20px 0;text-align:left}\n.success-box-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #dbeafe;font-size:13px}\n.success-box-row:last-child{border-bottom:none}\n.success-box-lbl{color:var(--sub)}\n.success-box-val{font-weight:600;color:var(--blu2)}\n.new-order-btn{background:linear-gradient(135deg,var(--oro),#e6b84a);border:none;border-radius:12px;padding:13px 24px;color:#0e2552;font-size:15px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;margin-top:8px}\n\n\/* \u2500\u2500 TOAST \u2500\u2500 *\/\n.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#dc2626;color:#fff;padding:12px 22px;border-radius:12px;font-weight:600;font-size:14px;z-index:9999;box-shadow:0 4px 24px rgba(0,0,0,.2);white-space:nowrap;animation:popIn .2s ease}\n\n\/* \u2500\u2500 FOOTER \u2500\u2500 *\/\n.footer{text-align:center;color:#94a3b8;font-size:12px;padding:20px;margin-top:10px}\n\n@media(max-width:480px){\n .hero-title{font-size:24px}\n .qp-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}\n}\n<\/style>\n<\/head>\n<body>\n\n\n<div class=\"hero\">\n <span class=\"hero-icon\">\ud83c\udf7d<\/span>\n <div class=\"hero-azienda\" id=\"nomeAzienda\">La Mia Azienda<\/div>\n <h1 class=\"hero-title\">Prenota il tuo ordine<\/h1>\n <p class=\"hero-sub\">Scegli i prodotti, indica le quantit\u00e0 e invia \u2014 ti aspettiamo! Sarai ricontattato preventivamente<\/p>\n<\/div>\n\n<div class=\"wrap\">\n \n <div class=\"steps\" id=\"steps-bar\">\n <div class=\"step\">\n <div class=\"step-num active\" id=\"step1-num\">1<\/div>\n <div class=\"step-lbl active\" id=\"step1-lbl\">Chi sei<\/div>\n <\/div>\n <div class=\"step-line\" id=\"line1\"><\/div>\n <div class=\"step\">\n <div class=\"step-num\" id=\"step2-num\">2<\/div>\n <div class=\"step-lbl\" id=\"step2-lbl\">Prodotti<\/div>\n <\/div>\n <div class=\"step-line\" id=\"line2\"><\/div>\n <div class=\"step\">\n <div class=\"step-num\" id=\"step3-num\">3<\/div>\n <div class=\"step-lbl\" id=\"step3-lbl\">Conferma<\/div>\n <\/div>\n <\/div>\n\n <div id=\"main-content\"><\/div>\n<\/div>\n\n<div id=\"toast-el\" class=\"toast\" style=\"display:none\"><\/div>\n<div class=\"footer\">Powered by <strong id=\"footer-az\">La Mia Azienda<\/strong><\/div>\n\n<script>\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ CONFIGURAZIONE \u2014 MODIFICA QUI PRIMA DI PUBBLICARE\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ Questi due valori devono essere IDENTICI a quelli scritti\n\/\/ dentro prenotazioni-api.php (SECRET_KEY) e all'URL dove\n\/\/ hai caricato quel file. Una volta scritti qui, la pagina\n\/\/ funziona su qualsiasi PC\/telefono senza altre configurazioni.\nconst CFG = {\n apiUrl: 'https:\/\/www.pellitteri.net\/prenotazioni-api.php', \/\/ \u2190 URL del tuo file PHP\n apiKey: 'DexcomG6@' \/\/ \u2190 deve essere = SECRET_KEY nel PHP\n};\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ DATI\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nconst CATS_DEFAULT = [\n {nome:\"ANTIPASTI\",prodotti:[\"Acciughe al verde\",\"Acciughe al bagnetto verde\",\"Alici marinate\",\"Antipasto rosso piemontese\",\"Bagna Caoda classica\",\"Barchette miste\",\"Barchette al salmone\",\"Barchette ai gamberetti\",\"Capricciosa\",\"Insalata di polipo con patate\",\"Insalata di pollo\",\"Insalata russa\",\"Insalata sedano rapa \u2013 prosciutto grana e noci\",\"Lingua in salsa verde\",\"Mousse di prosciutto\",\"Mousse di tonno\",\"Peperini al tonno\",\"Peperini alle acciughe\",\"Peperone solo al forno\",\"Peperoni in bagna di acciughe\",\"Peperoni con bagna caoda\",\"Vitello tonnato\",\"Vitello tonnato scomposto\",\"Vol au vent alla fonduta\"]},\n {nome:\"PRIMI PIATTI\",prodotti:[\"Agnolotti di carne\",\"Crespelle prosciutto e formaggio\",\"Gnocchi alla romana\",\"Gnocchi di patate\",\"Lasagne al rag\u00f9\",\"Lasagne al pesto\",\"Lasagne vegetariane\",\"Panzerotti di magro\",\"Plin\",\"Tagliatelle fresche\",\"Taglierini freschi\"]},\n {nome:\"SECONDI PIATTI\",prodotti:[\"Petto di pollo in umido con cuori di carciofo\",\"Arrosto di vitello\",\"Coniglio alle olive\",\"Cotechino con lenticchie\",\"Sugo di arrosto\",\"Brasato\",\"Filetto di maiale arrosto\",\"Pollo ripieno (intero)\",\"Baccal\u00e0\"]},\n {nome:\"CONTORNI\",prodotti:[\"Carote al burro\",\"Carciofi alla diavola\",\"Cipolline in agrodolce\",\"Flan spinaci\",\"Melanzane impanate\",\"Flan porri\",\"Palline di spinaci\",\"Purea\",\"Sformatini asparagi\",\"Sformatini carciofi\",\"Torta pasqualina\",\"Torte salate varie e di stagione (intere)\",\"Patate al forno\"]},\n {nome:\"ALTRO\",prodotti:[\"Altro\"]}\n];\nconst UNITS = [\"g\",\"etti\",\"kg\",\"pz\",\"porz\",\"vasch\",\"vassoio\",\"teglia\",\"\u270f\ufe0f libero\"];\n\nlet cats = CATS_DEFAULT;\nlet azienda = \"La Mia Azienda\";\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ STATO ORDINE\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nlet ordine = {\n nome:\"\", cognome:\"\", telefono:\"\", email:\"\",\n dataRitiro:\"\", fas:\"mattina\",\n prodotti:[], note:\"\"\n};\nlet step = 1;\nlet qpCat = null;\n\nconst uid = ()=>Date.now().toString(36)+Math.random().toString(36).slice(2);\nconst today = ()=>new Date().toISOString().split(\"T\")[0];\nconst tomorrow = ()=>{ const d=new Date(); d.setDate(d.getDate()+1); return d.toISOString().split(\"T\")[0]; };\nconst fmtD = d=>d?new Date(d+\"T00:00:00\").toLocaleDateString(\"it-IT\"):\"\u2014\";\nconst esc = s=>String(s||\"\").replace(\/&\/g,\"&\").replace(\/<\/g,\"<\").replace(\/>\/g,\">\").replace(\/\"\/g,\""\");\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ CARICA DATI DAL SERVER (categorie e nome azienda)\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nlet disab = {}; \/\/ prodotti non disponibili\n\nasync function loadConfig(){\n try{\n const r=await fetch(`${CFG.apiUrl}?action=load`,{headers:{\"X-API-Key\":CFG.apiKey}});\n const d=await r.json();\n if(d.categorie) cats=d.categorie;\n if(d.disab) disab=d.disab;\n if(d.azienda){\n azienda=d.azienda;\n document.getElementById(\"nomeAzienda\").textContent=azienda;\n document.getElementById(\"footer-az\").textContent=azienda;\n }\n \/\/ Filtra le categorie: mostra solo prodotti disponibili\n cats = cats.map(c=>({\n ...c,\n prodotti: c.prodotti.filter(p=>!disab[c.nome+\"||\"+p])\n })).filter(c=>c.prodotti.length>0);\n }catch(e){ \/* usa default *\/ }\n qpCat=cats[0]?.nome||null;\n render();\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ TOAST\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nlet _tt=null;\nfunction toast(m){const el=document.getElementById(\"toast-el\");el.textContent=m;el.style.display=\"block\";clearTimeout(_tt);_tt=setTimeout(()=>el.style.display=\"none\",3500)}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ STEPS UI\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction updateSteps(){\n for(let i=1;i<=3;i++){\n const num=document.getElementById(`step${i}-num`);\n const lbl=document.getElementById(`step${i}-lbl`);\n if(!num)continue;\n num.className=\"step-num\"+(i<step?\" done\":i===step?\" active\":\"\");\n lbl.className=\"step-lbl\"+(i===step?\" active\":\"\");\n if(i<step) num.textContent=\"\u2713\";\n else num.textContent=i;\n }\n for(let i=1;i<=2;i++){\n const line=document.getElementById(`line${i}`);\n if(line) line.className=\"step-line\"+(i<step?\" done\":\"\");\n }\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ RENDER\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction render(){\n updateSteps();\n const mc=document.getElementById(\"main-content\");\n if(!mc)return;\n if(step===1) mc.innerHTML=rStep1();\n else if(step===2) mc.innerHTML=rStep2();\n else if(step===3) mc.innerHTML=rStep3();\n window.scrollTo({top:0,behavior:\"smooth\"});\n}\n\n\/\/ \u2500\u2500 STEP 1: DATI CLIENTE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction rStep1(){\n return`<div class=\"ani\">\n <div class=\"card\">\n <div class=\"card-title\"><span>\ud83d\udc64<\/span> I tuoi dati<\/div>\n <div class=\"fg\">\n <label class=\"lbl\">Nome <span class=\"req\">*<\/span><\/label>\n <input class=\"inp\" id=\"s1-nome\" value=\"${esc(ordine.nome)}\" placeholder=\"Mario\" autocomplete=\"given-name\">\n <\/div>\n <div class=\"fg\">\n <label class=\"lbl\">Cognome <span class=\"req\">*<\/span><\/label>\n <input class=\"inp\" id=\"s1-cognome\" value=\"${esc(ordine.cognome)}\" placeholder=\"Rossi\" autocomplete=\"family-name\">\n <\/div>\n <div class=\"fg\">\n <label class=\"lbl\">Telefono <span class=\"req\">*<\/span><\/label>\n <input class=\"inp\" id=\"s1-tel\" value=\"${esc(ordine.telefono)}\" placeholder=\"3xx xxxxxxx\" type=\"tel\" autocomplete=\"tel\">\n <\/div>\n <div class=\"fg\">\n <label class=\"lbl\">Email <span style=\"color:var(--sub);font-size:10px;font-weight:400;text-transform:none\">(per ricevere la conferma)<\/span><\/label>\n <input class=\"inp\" id=\"s1-email\" value=\"${esc(ordine.email)}\" placeholder=\"mario@email.it\" type=\"email\" autocomplete=\"email\">\n <\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"card-title\"><span>\ud83d\udcc5<\/span> Quando ritiri?<\/div>\n <div class=\"fg\">\n <label class=\"lbl\">Data di ritiro <span class=\"req\">*<\/span><\/label>\n <input class=\"inp\" id=\"s1-data\" type=\"date\" value=\"${esc(ordine.dataRitiro)}\" min=\"${tomorrow()}\">\n <\/div>\n <div class=\"fg\">\n <label class=\"lbl\">Fascia oraria<\/label>\n <div class=\"toggle-wrap\">\n <button class=\"toggle-btn${ordine.fas===\"mattina\"?\" on\":\"\"}\" onclick=\"setFas('mattina')\">\u2600\ufe0f Mattina<\/button>\n <button class=\"toggle-btn${ordine.fas===\"pomeriggio\"?\" on\":\"\"}\" onclick=\"setFas('pomeriggio')\">\ud83c\udf06 Pomeriggio<\/button>\n <\/div>\n <\/div>\n <\/div>\n <button class=\"btn-pri\" onclick=\"avanti1()\">Scegli i prodotti \u2192<\/button>\n <\/div>`;\n}\n\nfunction setFas(v){\n ordine.fas=v;\n document.querySelectorAll(\".toggle-btn\").forEach(b=>b.classList.toggle(\"on\",b.textContent.includes(v===\"mattina\"?\"Mattina\":\"Pomeriggio\")));\n}\n\nfunction avanti1(){\n const nome=document.getElementById(\"s1-nome\")?.value.trim();\n const cognome=document.getElementById(\"s1-cognome\")?.value.trim();\n const tel=document.getElementById(\"s1-tel\")?.value.trim();\n const email=document.getElementById(\"s1-email\")?.value.trim();\n const data=document.getElementById(\"s1-data\")?.value;\n let ok=true;\n if(!nome){document.getElementById(\"s1-nome\").classList.add(\"err\");ok=false;}else document.getElementById(\"s1-nome\").classList.remove(\"err\");\n if(!cognome){document.getElementById(\"s1-cognome\").classList.add(\"err\");ok=false;}else document.getElementById(\"s1-cognome\").classList.remove(\"err\");\n if(!tel){document.getElementById(\"s1-tel\").classList.add(\"err\");ok=false;}else document.getElementById(\"s1-tel\").classList.remove(\"err\");\n if(!data){document.getElementById(\"s1-data\").classList.add(\"err\");ok=false;}else document.getElementById(\"s1-data\").classList.remove(\"err\");\n if(!ok){toast(\"\u26a0\ufe0f Compila tutti i campi obbligatori\");return;}\n ordine.nome=nome;ordine.cognome=cognome;ordine.telefono=tel;ordine.email=email;ordine.dataRitiro=data;\n step=2;render();\n}\n\n\/\/ \u2500\u2500 STEP 2: PRODOTTI \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction rStep2(){\n if(!qpCat)qpCat=cats[0]?.nome||null;\n const cat=cats.find(c=>c.nome===qpCat)||cats[0];\n const selIds=new Set(ordine.prodotti.map(p=>p.prodotto));\n const tabs=cats.map(c=>`<button class=\"qp-tab${c.nome===qpCat?\" on\":\"\"}\" onclick=\"setTab('${esc(c.nome)}')\">${esc(c.nome)}<\/button>`).join(\"\");\n const grid=cat?cat.prodotti.map(p=>qpItem(p,cat.nome,selIds)).join(\"\"):\"\";\n const summary=ordine.prodotti.length>0?`<div class=\"sel-summary\">\n <div class=\"sel-sum-title\">\ud83d\uded2 Selezionati (${ordine.prodotti.length})<\/div>\n ${ordine.prodotti.map(pr=>`<div class=\"sel-sum-row\">\n <span class=\"sel-sum-nome\">${esc(pr.prodotto)}<\/span>\n <span class=\"sel-sum-qty\">${pr.q||\"\u2014\"}<\/span>\n <button class=\"sel-sum-del\" onclick=\"removeP('${esc(pr.prodotto)}')\">\u2715<\/button>\n <\/div>`).join(\"\")}\n <\/div>`:\"\";\n\n return`<div class=\"ani\">\n <div class=\"card\">\n <div class=\"card-title\"><span>\ud83c\udf7d<\/span> Cosa vuoi ordinare?<\/div>\n <p style=\"color:var(--sub);font-size:13px;margin-bottom:16px;margin-top:-10px\">Tocca un prodotto per selezionarlo, poi inserisci la quantit\u00e0<\/p>\n <div class=\"picker-wrap\">\n <div class=\"qp-tabs\">${tabs}<\/div>\n <div class=\"qp-grid\" id=\"qpg\">${grid}<\/div>\n <\/div>\n ${summary}\n <\/div>\n <div class=\"card\">\n <div class=\"card-title\"><span>\ud83d\udcdd<\/span> Note aggiuntive<\/div>\n <textarea class=\"inp\" id=\"s2-note\" rows=\"3\" placeholder=\"Allergie, preferenze, richieste particolari\u2026\" style=\"resize:vertical;min-height:80px\">${esc(ordine.note)}<\/textarea>\n <\/div>\n <button class=\"btn-pri\" onclick=\"avanti2()\">Riepilogo ordine \u2192<\/button>\n <button class=\"btn-sec\" onclick=\"indietro()\">\u2190 Torna indietro<\/button>\n <\/div>`;\n}\n\nfunction qpItem(p,catNome,selIds){\n const isSel=selIds.has(p);\n const pr=isSel?ordine.prodotti.find(x=>x.prodotto===p):null;\n return`<button class=\"qp-item${isSel?\" sel\":\"\"}\" onclick=\"toggleP('${esc(p)}','${esc(catNome)}')\">\n ${esc(p)}\n ${isSel?buildQtyHTML(p,pr.q||\"\"):`<div class=\"item-qty\"><\/div>`}\n <\/button>`;\n}\n\nfunction buildQtyHTML(prodotto,qVal){\n let num=\"\",unit=\"\",free=\"\",isLibero=false;\n if(qVal){\n const m=qVal.match(\/^(\\d+(?:[.,]\\d+)?)\\s*(.+)$\/);\n if(m){num=m[1];const u=m[2].trim();if(UNITS.includes(u)&&u!==\"\u270f\ufe0f libero\"){unit=u;}else{isLibero=true;free=qVal;}}\n else{isLibero=true;free=qVal;}\n }\n const pid=prodotto.replace(\/[^a-z0-9]\/gi,\"_\");\n const unitBtns=UNITS.map(u=>{\n const isL=u===\"\u270f\ufe0f libero\";const isOn=isL?isLibero:unit===u;\n return`<button type=\"button\" class=\"qty-unit${isL?\" libero\":\"\"}${isOn?\" on\":\"\"}\" onclick=\"event.stopPropagation();selUnit('${esc(prodotto)}','${esc(u)}')\">${esc(u)}<\/button>`;\n }).join(\"\");\n return`<div class=\"item-qty\" onclick=\"event.stopPropagation()\">\n <input type=\"number\" class=\"qty-num\" id=\"qn_${pid}\" placeholder=\"0\" value=\"${esc(num)}\" min=\"0\" step=\"0.1\"\n oninput=\"event.stopPropagation();updQty('${esc(prodotto)}')\" onclick=\"event.stopPropagation()\">\n <div class=\"qty-units\">${unitBtns}<\/div>\n <input type=\"text\" class=\"qty-free${isLibero?\" show\":\"\"}\" id=\"qf_${pid}\" placeholder=\"Testo libero\u2026\" value=\"${esc(free)}\"\n oninput=\"event.stopPropagation();updQtyFree('${esc(prodotto)}')\" onclick=\"event.stopPropagation()\">\n <\/div>`;\n}\n\nfunction selUnit(prodotto,unit){\n const pid=prodotto.replace(\/[^a-z0-9]\/gi,\"_\");\n const isLibero=unit===\"\u270f\ufe0f libero\";\n const p=ordine.prodotti.find(p=>p.prodotto===prodotto);if(!p)return;\n const cont=document.getElementById(\"qn_\"+pid)?.closest(\".item-qty\");\n if(cont){\n cont.querySelectorAll(\".qty-unit\").forEach(b=>b.classList.toggle(\"on\",b.textContent.trim()===unit));\n const fi=cont.querySelector(\".qty-free\");\n if(fi){fi.classList.toggle(\"show\",isLibero);if(!isLibero)fi.value=\"\";}\n }\n p._unit=isLibero?\"libero\":unit;\n if(isLibero){const fi=document.getElementById(\"qf_\"+pid);p.q=fi?fi.value:\"\";}\n else{const ni=document.getElementById(\"qn_\"+pid);const n=ni?ni.value:\"\";p.q=n?n+\" \"+unit:\"\";}\n}\n\nfunction updQty(prodotto){\n const pid=prodotto.replace(\/[^a-z0-9]\/gi,\"_\");\n const p=ordine.prodotti.find(x=>x.prodotto===prodotto);if(!p||p._unit===\"libero\")return;\n const ni=document.getElementById(\"qn_\"+pid);if(ni&&p._unit)p.q=ni.value?ni.value+\" \"+p._unit:\"\";\n}\n\nfunction updQtyFree(prodotto){\n const pid=prodotto.replace(\/[^a-z0-9]\/gi,\"_\");\n const p=ordine.prodotti.find(x=>x.prodotto===prodotto);if(!p)return;\n const fi=document.getElementById(\"qf_\"+pid);if(fi)p.q=fi.value;\n}\n\nfunction setTab(nome){\n \/\/ sincronizza quantit\u00e0 correnti prima di cambiare tab\n syncQty();\n qpCat=nome;\n const cat=cats.find(c=>c.nome===nome);\n const grid=document.getElementById(\"qpg\");if(!grid||!cat)return;\n document.querySelectorAll(\".qp-tab\").forEach(b=>b.classList.toggle(\"on\",b.textContent.trim()===nome));\n const selIds=new Set(ordine.prodotti.map(p=>p.prodotto));\n grid.innerHTML=cat.prodotti.map(p=>qpItem(p,nome,selIds)).join(\"\");\n}\n\nfunction syncQty(){\n document.querySelectorAll(\".qp-item.sel\").forEach(btn=>{\n const nome=btn.childNodes[0].textContent.trim();\n const p=ordine.prodotti.find(x=>x.prodotto===nome);if(!p)return;\n const pid=nome.replace(\/[^a-z0-9]\/gi,\"_\");\n if(p._unit===\"libero\"){const fi=document.getElementById(\"qf_\"+pid);if(fi)p.q=fi.value;}\n else if(p._unit){const ni=document.getElementById(\"qn_\"+pid);if(ni&&ni.value)p.q=ni.value+\" \"+p._unit;}\n });\n}\n\nfunction toggleP(prodotto,cat){\n syncQty();\n const idx=ordine.prodotti.findIndex(p=>p.prodotto===prodotto);\n if(idx>=0)ordine.prodotti.splice(idx,1);\n else ordine.prodotti.push({cat,prodotto,q:\"\",_unit:\"\"});\n refreshGrid();refreshSummary();\n}\n\nfunction removeP(prodotto){\n syncQty();\n ordine.prodotti=ordine.prodotti.filter(p=>p.prodotto!==prodotto);\n refreshGrid();refreshSummary();\n}\n\nfunction refreshGrid(){\n const cat=cats.find(c=>c.nome===qpCat);\n const grid=document.getElementById(\"qpg\");if(!grid||!cat)return;\n const selIds=new Set(ordine.prodotti.map(p=>p.prodotto));\n grid.innerHTML=cat.prodotti.map(p=>qpItem(p,qpCat,selIds)).join(\"\");\n}\n\nfunction refreshSummary(){\n const ex=document.querySelector(\".sel-summary\");if(ex)ex.remove();\n const card=document.querySelector(\".picker-wrap\")?.closest(\".card\");if(!card)return;\n if(ordine.prodotti.length>0){\n const d=document.createElement(\"div\");\n d.innerHTML=`<div class=\"sel-summary\">\n <div class=\"sel-sum-title\">\ud83d\uded2 Selezionati (${ordine.prodotti.length})<\/div>\n ${ordine.prodotti.map(pr=>`<div class=\"sel-sum-row\">\n <span class=\"sel-sum-nome\">${esc(pr.prodotto)}<\/span>\n <span class=\"sel-sum-qty\">${pr.q||\"\u2014\"}<\/span>\n <button class=\"sel-sum-del\" onclick=\"removeP('${esc(pr.prodotto)}')\">\u2715<\/button>\n <\/div>`).join(\"\")}\n <\/div>`;\n card.appendChild(d.firstElementChild);\n }\n}\n\nfunction avanti2(){\n syncQty();\n ordine.note=document.getElementById(\"s2-note\")?.value||\"\";\n if(!ordine.prodotti.length){toast(\"\u26a0\ufe0f Seleziona almeno un prodotto\");return;}\n step=3;render();\n}\nfunction indietro(){step--;render();}\n\n\/\/ \u2500\u2500 STEP 3: RIEPILOGO + INVIO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction rStep3(){\n return`<div class=\"ani\">\n <div class=\"card\">\n <div class=\"card-title\"><span>\ud83d\udccb<\/span> Riepilogo ordine<\/div>\n\n <div style=\"background:#f8fafc;border-radius:10px;padding:14px 16px;margin-bottom:16px\">\n <div style=\"display:flex;justify-content:space-between;margin-bottom:6px\">\n <span style=\"font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:700\">${esc(ordine.nome)} ${esc(ordine.cognome)}<\/span>\n <span style=\"background:${ordine.fas===\"mattina\"?\"#eff6ff\":\"#fffbeb\"};color:${ordine.fas===\"mattina\"?\"#1d56c7\":\"#92400e\"};border-radius:20px;padding:3px 11px;font-size:11px;font-weight:700\">${ordine.fas===\"mattina\"?\"\u2600\ufe0f Mattina\":\"\ud83c\udf06 Pomeriggio\"}<\/span>\n <\/div>\n <div style=\"font-size:13px;color:var(--sub)\">\ud83d\udcde ${esc(ordine.telefono)}<\/div>\n <div style=\"font-size:13px;color:var(--blu2);font-weight:600;margin-top:4px\">\ud83d\udecd Ritiro: ${fmtD(ordine.dataRitiro)}<\/div>\n <\/div>\n\n <div style=\"font-weight:700;color:var(--blu);font-size:11px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px\">Prodotti ordinati (${ordine.prodotti.length})<\/div>\n <div style=\"display:flex;flex-direction:column;gap:7px;margin-bottom:16px\">\n ${ordine.prodotti.map(pr=>`\n <div style=\"display:flex;align-items:center;justify-content:space-between;background:#f8fafc;border-radius:9px;padding:9px 13px;gap:10px;flex-wrap:wrap\">\n <span style=\"font-weight:600;font-size:13px;flex:1\">${esc(pr.prodotto)}<\/span>\n <span style=\"background:#bfdbfe;color:#1e40af;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700\">${esc(pr.q||\"qt\u00e0 n.d.\")}<\/span>\n <span style=\"background:#e0e7ff;color:#4338ca;border-radius:6px;padding:2px 8px;font-size:11px\">${esc(pr.cat)}<\/span>\n <\/div>`).join(\"\")}\n <\/div>\n ${ordine.note?`<div style=\"background:#fffbeb;border:1px solid #fde68a;border-radius:9px;padding:11px 14px;font-size:13px;color:#92400e\">\ud83d\udcdd ${esc(ordine.note)}<\/div>`:\"\"}\n <\/div>\n\n <button class=\"btn-pri\" id=\"invia-btn\" onclick=\"inviaOrdine()\">\n <span id=\"invia-txt\">\u2713 Conferma e invia ordine<\/span>\n <\/button>\n <button class=\"btn-sec\" onclick=\"indietro()\">\u2190 Modifica prodotti<\/button>\n <\/div>`;\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ INVIO ORDINE\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nasync function inviaOrdine(){\n const btn=document.getElementById(\"invia-btn\");\n const txt=document.getElementById(\"invia-txt\");\n btn.disabled=true;\n btn.innerHTML=`<div class=\"spinner\"><\/div> Invio in corso\u2026`;\n\n const prenotazione={\n id: uid(),\n nome: ordine.nome,\n cognome: ordine.cognome,\n telefono: ordine.telefono,\n email: ordine.email,\n dataPrenotazione: today(),\n dataRitiro: ordine.dataRitiro,\n fas: ordine.fas,\n prodotti: ordine.prodotti.map(p=>({id:uid(),cat:p.cat,prodotto:p.prodotto,q:p.q||\"\"})),\n note: ordine.note,\n fonte: \"cliente\"\n };\n\n try{\n const r=await fetch(`${CFG.apiUrl}?action=save_pren`,{\n method:\"POST\",\n headers:{\"Content-Type\":\"application\/json\",\"X-API-Key\":CFG.apiKey},\n body:JSON.stringify(prenotazione)\n });\n const d=await r.json();\n if(!d.ok) throw new Error(d.error||\"Errore server\");\n mostraSuccesso(prenotazione);\n }catch(e){\n btn.disabled=false;\n btn.innerHTML=`<span>\u2713 Conferma e invia ordine<\/span>`;\n toast(\"\u274c Errore durante l'invio. Riprova o contattaci direttamente.\");\n }\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ SCHERMATA SUCCESSO\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction mostraSuccesso(p){\n document.getElementById(\"steps-bar\").style.display=\"none\";\n const emailMsg = p.email\n ? `<p style=\"color:var(--sub);font-size:13px;margin-bottom:16px\">\ud83d\udce7 Abbiamo inviato una conferma a <strong>${esc(p.email)}<\/strong><\/p>`\n : `<p style=\"color:var(--sub);font-size:13px;margin-bottom:16px\">Per modifiche o info chiamaci direttamente.<\/p>`;\n document.getElementById(\"main-content\").innerHTML=`\n <div class=\"success-screen\">\n <div class=\"success-circle\">\n <svg viewBox=\"0 0 50 50\">\n <path d=\"M14 27 L22 35 L36 17\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n <h2 class=\"success-title\">Ordine inviato!<\/h2>\n <p class=\"success-sub\">Grazie ${esc(p.nome)}, abbiamo ricevuto il tuo ordine.<br>Ti aspettiamo il <strong>${fmtD(p.dataRitiro)}<\/strong> ${p.fas===\"mattina\"?\"in mattinata\":\"nel pomeriggio\"}.<\/p>\n <div class=\"success-box\">\n <div class=\"success-box-row\">\n <span class=\"success-box-lbl\">Nome<\/span>\n <span class=\"success-box-val\">${esc(p.nome)} ${esc(p.cognome)}<\/span>\n <\/div>\n <div class=\"success-box-row\">\n <span class=\"success-box-lbl\">Telefono<\/span>\n <span class=\"success-box-val\">${esc(p.telefono)}<\/span>\n <\/div>\n ${p.email?`<div class=\"success-box-row\">\n <span class=\"success-box-lbl\">Email<\/span>\n <span class=\"success-box-val\">${esc(p.email)}<\/span>\n <\/div>`:\"\"}\n <div class=\"success-box-row\">\n <span class=\"success-box-lbl\">Ritiro<\/span>\n <span class=\"success-box-val\">${fmtD(p.dataRitiro)} \u00b7 ${p.fas===\"mattina\"?\"\u2600\ufe0f Mattina\":\"\ud83c\udf06 Pomeriggio\"}<\/span>\n <\/div>\n <div class=\"success-box-row\">\n <span class=\"success-box-lbl\">Prodotti<\/span>\n <span class=\"success-box-val\">${p.prodotti.length} articol${p.prodotti.length===1?\"o\":\"i\"}<\/span>\n <\/div>\n <\/div>\n ${emailMsg}\n <button class=\"new-order-btn\" onclick=\"nuovoOrdine()\">\uff0b Fai un altro ordine<\/button>\n <\/div>`;\n}\n\nfunction nuovoOrdine(){\n ordine={nome:\"\",cognome:\"\",telefono:\"\",email:\"\",dataRitiro:\"\",fas:\"mattina\",prodotti:[],note:\"\"};\n step=1;\n document.getElementById(\"steps-bar\").style.display=\"flex\";\n render();\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ INIT\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nwindow.addEventListener(\"DOMContentLoaded\",()=>{\n \/\/ IMPORTANTE: questa pagina usa SEMPRE i valori di CFG scritti\n \/\/ in cima al file (apiUrl e apiKey). Non dipende dal browser,\n \/\/ quindi funziona identica su qualsiasi PC o telefono.\n if(CFG.apiUrl.includes(\"tuosito.it\")){\n document.getElementById(\"main-content\").innerHTML=`\n <div class=\"card\" style=\"text-align:center;padding:40px 24px\">\n <div style=\"font-size:40px;margin-bottom:14px\">\u26a0\ufe0f<\/div>\n <h2 style=\"font-family:'Cormorant Garamond',serif;font-size:22px;margin-bottom:10px\">Configurazione mancante<\/h2>\n <p style=\"color:var(--sub);font-size:14px;line-height:1.6\">Questa pagina non \u00e8 ancora collegata al database.<br>L'amministratore deve modificare i valori <b>apiUrl<\/b> e <b>apiKey<\/b> in cima al file HTML.<\/p>\n <\/div>`;\n document.getElementById(\"steps-bar\").style.display=\"none\";\n return;\n }\n loadConfig();\n});\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Prenota il tuo ordine \ud83c\udf7d La Mia Azienda Prenota il tuo ordine Scegli i prodotti, indica le quantit\u00e0 e invia \u2014 ti aspettiamo! Sarai ricontattato preventivamente 1 Chi sei 2 Prodotti 3 Conferma Powered by La Mia Azienda<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-626","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.pellitteri.net\/index.php?rest_route=\/wp\/v2\/pages\/626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pellitteri.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.pellitteri.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.pellitteri.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pellitteri.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=626"}],"version-history":[{"count":4,"href":"https:\/\/www.pellitteri.net\/index.php?rest_route=\/wp\/v2\/pages\/626\/revisions"}],"predecessor-version":[{"id":658,"href":"https:\/\/www.pellitteri.net\/index.php?rest_route=\/wp\/v2\/pages\/626\/revisions\/658"}],"wp:attachment":[{"href":"https:\/\/www.pellitteri.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":626,"date":"2026-06-13T14:42:00","date_gmt":"2026-06-13T12:42:00","guid":{"rendered":"https:\/\/www.pellitteri.net\/?page_id=626"},"modified":"2026-06-22T17:57:31","modified_gmt":"2026-06-22T15:57:31","slug":"form-prenotazione-clienti","status":"publish","type":"page","link":"https:\/\/www.pellitteri.net\/?page_id=626","title":{"rendered":"Form prenotazione clienti per ora solo in fase di test"},"content":{"rendered":"\n\n\n\n\n\nPrenota il tuo ordine<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\n:root{\n --blu:#1a3a6e;--blu2:#1d56c7;--blu3:#3b82f6;--blu-l:#eff6ff;\n --oro:#c9a84c;--oro2:#f0d080;--bg:#f0f4fa;--card:#fff;\n --testo:#1a2540;--sub:#5a6a85;--border:#dde4f0;\n --r:16px;--sh:0 4px 32px rgba(26,58,110,.12);\n}\nhtml,body{min-height:100%;font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--testo)}\ninput,select,textarea,button{font-family:'DM Sans',sans-serif}\ninput:focus,select:focus,textarea:focus{outline:none;border-color:var(--blu2)!important;box-shadow:0 0 0 3px rgba(29,86,199,.13)}\n@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}\n@keyframes popIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}\n@keyframes spin{to{transform:rotate(360deg)}}\n@keyframes checkmark{0%{stroke-dashoffset:50}100%{stroke-dashoffset:0}}\n.ani{animation:fadeUp .35s ease both}\n\n\/* \u2500\u2500 HERO \u2500\u2500 *\/\n.hero{background:linear-gradient(135deg,#0e2552 0%,#1a3a6e 45%,#1d56c7 100%);padding:36px 20px 48px;text-align:center;position:relative;overflow:hidden}\n.hero::before{content:\"\";position:absolute;inset:0;background:url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\")}\n.hero-icon{font-size:44px;margin-bottom:14px;display:block}\n.hero-title{font-family:'Cormorant Garamond',serif;color:#fff;font-size:28px;font-weight:700;line-height:1.2;margin-bottom:8px}\n.hero-sub{color:rgba(255,255,255,.65);font-size:15px;font-weight:300;max-width:320px;margin:0 auto}\n.hero-azienda{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:5px 16px;font-size:12px;color:rgba(255,255,255,.8);letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}\n\n\/* \u2500\u2500 WRAPPER \u2500\u2500 *\/\n.wrap{max-width:580px;margin:0 auto;padding:0 16px 60px}\n\n\/* \u2500\u2500 STEPS \u2500\u2500 *\/\n.steps{display:flex;align-items:center;justify-content:center;gap:0;margin:-24px auto 28px;background:var(--card);border-radius:12px;padding:14px 20px;box-shadow:var(--sh);max-width:480px;position:relative;z-index:10}\n.step{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}\n.step-num{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--sub);background:#fff;transition:all .3s}\n.step-num.done{background:var(--blu2);border-color:var(--blu2);color:#fff}\n.step-num.active{background:var(--oro);border-color:var(--oro);color:#0e2552}\n.step-lbl{font-size:10px;color:var(--sub);font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-align:center}\n.step-lbl.active{color:var(--blu2)}\n.step-line{flex:1;height:2px;background:var(--border);margin:0 6px;margin-bottom:14px;transition:background .3s}\n.step-line.done{background:var(--blu2)}\n\n\/* \u2500\u2500 CARD \u2500\u2500 *\/\n.card{background:var(--card);border-radius:var(--r);padding:26px 22px;box-shadow:var(--sh);border:1px solid var(--border);margin-bottom:16px}\n.card-title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:700;color:var(--testo);margin-bottom:18px;display:flex;align-items:center;gap:10px}\n.card-title span{font-size:22px}\n\n\/* \u2500\u2500 FORM FIELDS \u2500\u2500 *\/\n.fg{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}\n.lbl{font-size:11px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.06em}\n.lbl .req{color:#ef4444;margin-left:2px}\n.inp{border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;font-size:15px;color:var(--testo);background:#f8fafc;width:100%;transition:border-color .2s}\n.inp.err{border-color:#ef4444!important;background:#fff1f2}\n.err-msg{color:#ef4444;font-size:12px;margin-top:4px;display:none}\n.inp.err~.err-msg{display:block}\n.toggle-wrap{display:grid;grid-template-columns:1fr 1fr;gap:8px}\n.toggle-btn{border:1.5px solid var(--border);border-radius:10px;padding:12px 0;font-size:14px;font-weight:500;cursor:pointer;background:#f8fafc;color:var(--sub);transition:all .2s;font-family:'DM Sans',sans-serif;text-align:center}\n.toggle-btn.on{background:var(--blu-l);border-color:var(--blu3);color:var(--blu2);font-weight:700}\n\n\/* \u2500\u2500 QUICK PICKER \u2500\u2500 *\/\n.picker-wrap{background:#f8fafc;border:1.5px solid var(--border);border-radius:12px;padding:16px 14px;margin-bottom:14px}\n.qp-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}\n.qp-tab{background:#fff;border:1.5px solid var(--border);border-radius:20px;padding:6px 13px;font-size:12px;font-weight:600;cursor:pointer;color:var(--sub);transition:all .18s;font-family:'DM Sans',sans-serif}\n.qp-tab.on{background:var(--blu2);border-color:var(--blu2);color:#fff}\n.qp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:7px}\n.qp-item{background:#fff;border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;cursor:pointer;transition:all .18s;position:relative;font-size:13px;color:var(--testo);font-weight:500;text-align:left;font-family:'DM Sans',sans-serif;line-height:1.3;width:100%}\n.qp-item:hover{border-color:var(--blu3);background:var(--blu-l);color:var(--blu2)}\n.qp-item.sel{border-color:var(--blu2);background:var(--blu-l);color:var(--blu2);padding-right:26px}\n.qp-item.sel::after{content:\"\u2713\";position:absolute;top:8px;right:9px;font-size:12px;font-weight:700;color:var(--blu2)}\n\n\/* QUANTIT\u00c0 *\/\n.item-qty{display:none;margin-top:8px;flex-direction:column;gap:5px}\n.qp-item.sel .item-qty{display:flex}\n.qty-num{border:1.5px solid #93c5fd;border-radius:7px;padding:6px 9px;font-size:13px;width:100%;background:#fff;color:var(--testo);font-family:'DM Sans',sans-serif;font-weight:600}\n.qty-num:focus{outline:none;border-color:var(--blu2)}\n.qty-units{display:flex;flex-wrap:wrap;gap:4px}\n.qty-unit{border:1.5px solid #bfdbfe;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:var(--blu2);font-family:'DM Sans',sans-serif;transition:all .15s;white-space:nowrap}\n.qty-unit.on{background:var(--blu2);border-color:var(--blu2);color:#fff}\n.qty-unit.libero{border-color:#e2e8f0;color:var(--sub)}\n.qty-unit.libero.on{background:#475569;border-color:#475569;color:#fff}\n.qty-free{border:1.5px solid #e2e8f0;border-radius:7px;padding:5px 9px;font-size:12px;width:100%;background:#fff;color:var(--testo);font-family:'DM Sans',sans-serif;display:none}\n.qty-free.show{display:block}\n\n\/* RIEPILOGO *\/\n.sel-summary{background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;margin-top:12px}\n.sel-sum-title{font-weight:700;color:var(--blu);font-size:11px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}\n.sel-sum-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f1f5f9;gap:10px}\n.sel-sum-row:last-child{border-bottom:none}\n.sel-sum-nome{font-size:13px;font-weight:600;flex:1}\n.sel-sum-qty{color:var(--sub);font-size:12px;margin-right:4px}\n.sel-sum-del{background:none;border:none;color:#94a3b8;cursor:pointer;font-size:15px;padding:0 2px;flex-shrink:0}\n\n\/* \u2500\u2500 BOTTONI \u2500\u2500 *\/\n.btn-pri{width:100%;background:linear-gradient(135deg,var(--blu),var(--blu2));color:#fff;border:none;border-radius:12px;padding:15px;font-size:16px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:10px}\n.btn-pri:active{transform:scale(.98)}\n.btn-pri:disabled{opacity:.6;cursor:not-allowed}\n.btn-sec{width:100%;background:#f1f5f9;color:var(--sub);border:none;border-radius:12px;padding:13px;font-size:15px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;margin-top:10px}\n.btn-sec:active{transform:scale(.98)}\n\n\/* \u2500\u2500 SPINNER \u2500\u2500 *\/\n.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}\n\n\/* \u2500\u2500 SUCCESSO \u2500\u2500 *\/\n.success-screen{text-align:center;padding:40px 20px;animation:popIn .4s ease}\n.success-circle{width:80px;height:80px;background:linear-gradient(135deg,#16a34a,#22c55e);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 8px 24px rgba(22,163,74,.3)}\n.success-circle svg{width:40px;height:40px}\n.success-circle svg path{stroke:#fff;stroke-width:3;fill:none;stroke-dasharray:50;stroke-dashoffset:50;animation:checkmark .5s ease .3s forwards}\n.success-title{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:700;color:var(--testo);margin-bottom:10px}\n.success-sub{color:var(--sub);font-size:15px;line-height:1.6;margin-bottom:6px}\n.success-box{background:var(--blu-l);border:1px solid #bfdbfe;border-radius:12px;padding:16px 18px;margin:20px 0;text-align:left}\n.success-box-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #dbeafe;font-size:13px}\n.success-box-row:last-child{border-bottom:none}\n.success-box-lbl{color:var(--sub)}\n.success-box-val{font-weight:600;color:var(--blu2)}\n.new-order-btn{background:linear-gradient(135deg,var(--oro),#e6b84a);border:none;border-radius:12px;padding:13px 24px;color:#0e2552;font-size:15px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;margin-top:8px}\n\n\/* \u2500\u2500 TOAST \u2500\u2500 *\/\n.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#dc2626;color:#fff;padding:12px 22px;border-radius:12px;font-weight:600;font-size:14px;z-index:9999;box-shadow:0 4px 24px rgba(0,0,0,.2);white-space:nowrap;animation:popIn .2s ease}\n\n\/* \u2500\u2500 FOOTER \u2500\u2500 *\/\n.footer{text-align:center;color:#94a3b8;font-size:12px;padding:20px;margin-top:10px}\n\n@media(max-width:480px){\n .hero-title{font-size:24px}\n .qp-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}\n}\n<\/style>\n<\/head>\n<body>\n\n\n<div class=\"hero\">\n <span class=\"hero-icon\">\ud83c\udf7d<\/span>\n <div class=\"hero-azienda\" id=\"nomeAzienda\">La Mia Azienda<\/div>\n <h1 class=\"hero-title\">Prenota il tuo ordine<\/h1>\n <p class=\"hero-sub\">Scegli i prodotti, indica le quantit\u00e0 e invia \u2014 ti aspettiamo! Sarai ricontattato preventivamente<\/p>\n<\/div>\n\n<div class=\"wrap\">\n \n <div class=\"steps\" id=\"steps-bar\">\n <div class=\"step\">\n <div class=\"step-num active\" id=\"step1-num\">1<\/div>\n <div class=\"step-lbl active\" id=\"step1-lbl\">Chi sei<\/div>\n <\/div>\n <div class=\"step-line\" id=\"line1\"><\/div>\n <div class=\"step\">\n <div class=\"step-num\" id=\"step2-num\">2<\/div>\n <div class=\"step-lbl\" id=\"step2-lbl\">Prodotti<\/div>\n <\/div>\n <div class=\"step-line\" id=\"line2\"><\/div>\n <div class=\"step\">\n <div class=\"step-num\" id=\"step3-num\">3<\/div>\n <div class=\"step-lbl\" id=\"step3-lbl\">Conferma<\/div>\n <\/div>\n <\/div>\n\n <div id=\"main-content\"><\/div>\n<\/div>\n\n<div id=\"toast-el\" class=\"toast\" style=\"display:none\"><\/div>\n<div class=\"footer\">Powered by <strong id=\"footer-az\">La Mia Azienda<\/strong><\/div>\n\n<script>\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ CONFIGURAZIONE \u2014 MODIFICA QUI PRIMA DI PUBBLICARE\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ Questi due valori devono essere IDENTICI a quelli scritti\n\/\/ dentro prenotazioni-api.php (SECRET_KEY) e all'URL dove\n\/\/ hai caricato quel file. Una volta scritti qui, la pagina\n\/\/ funziona su qualsiasi PC\/telefono senza altre configurazioni.\nconst CFG = {\n apiUrl: 'https:\/\/www.pellitteri.net\/prenotazioni-api.php', \/\/ \u2190 URL del tuo file PHP\n apiKey: 'DexcomG6@' \/\/ \u2190 deve essere = SECRET_KEY nel PHP\n};\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ DATI\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nconst CATS_DEFAULT = [\n {nome:\"ANTIPASTI\",prodotti:[\"Acciughe al verde\",\"Acciughe al bagnetto verde\",\"Alici marinate\",\"Antipasto rosso piemontese\",\"Bagna Caoda classica\",\"Barchette miste\",\"Barchette al salmone\",\"Barchette ai gamberetti\",\"Capricciosa\",\"Insalata di polipo con patate\",\"Insalata di pollo\",\"Insalata russa\",\"Insalata sedano rapa \u2013 prosciutto grana e noci\",\"Lingua in salsa verde\",\"Mousse di prosciutto\",\"Mousse di tonno\",\"Peperini al tonno\",\"Peperini alle acciughe\",\"Peperone solo al forno\",\"Peperoni in bagna di acciughe\",\"Peperoni con bagna caoda\",\"Vitello tonnato\",\"Vitello tonnato scomposto\",\"Vol au vent alla fonduta\"]},\n {nome:\"PRIMI PIATTI\",prodotti:[\"Agnolotti di carne\",\"Crespelle prosciutto e formaggio\",\"Gnocchi alla romana\",\"Gnocchi di patate\",\"Lasagne al rag\u00f9\",\"Lasagne al pesto\",\"Lasagne vegetariane\",\"Panzerotti di magro\",\"Plin\",\"Tagliatelle fresche\",\"Taglierini freschi\"]},\n {nome:\"SECONDI PIATTI\",prodotti:[\"Petto di pollo in umido con cuori di carciofo\",\"Arrosto di vitello\",\"Coniglio alle olive\",\"Cotechino con lenticchie\",\"Sugo di arrosto\",\"Brasato\",\"Filetto di maiale arrosto\",\"Pollo ripieno (intero)\",\"Baccal\u00e0\"]},\n {nome:\"CONTORNI\",prodotti:[\"Carote al burro\",\"Carciofi alla diavola\",\"Cipolline in agrodolce\",\"Flan spinaci\",\"Melanzane impanate\",\"Flan porri\",\"Palline di spinaci\",\"Purea\",\"Sformatini asparagi\",\"Sformatini carciofi\",\"Torta pasqualina\",\"Torte salate varie e di stagione (intere)\",\"Patate al forno\"]},\n {nome:\"ALTRO\",prodotti:[\"Altro\"]}\n];\nconst UNITS = [\"g\",\"etti\",\"kg\",\"pz\",\"porz\",\"vasch\",\"vassoio\",\"teglia\",\"\u270f\ufe0f libero\"];\n\nlet cats = CATS_DEFAULT;\nlet azienda = \"La Mia Azienda\";\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ STATO ORDINE\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nlet ordine = {\n nome:\"\", cognome:\"\", telefono:\"\", email:\"\",\n dataRitiro:\"\", fas:\"mattina\",\n prodotti:[], note:\"\"\n};\nlet step = 1;\nlet qpCat = null;\n\nconst uid = ()=>Date.now().toString(36)+Math.random().toString(36).slice(2);\nconst today = ()=>new Date().toISOString().split(\"T\")[0];\nconst tomorrow = ()=>{ const d=new Date(); d.setDate(d.getDate()+1); return d.toISOString().split(\"T\")[0]; };\nconst fmtD = d=>d?new Date(d+\"T00:00:00\").toLocaleDateString(\"it-IT\"):\"\u2014\";\nconst esc = s=>String(s||\"\").replace(\/&\/g,\"&\").replace(\/<\/g,\"<\").replace(\/>\/g,\">\").replace(\/\"\/g,\""\");\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ CARICA DATI DAL SERVER (categorie e nome azienda)\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nlet disab = {}; \/\/ prodotti non disponibili\n\nasync function loadConfig(){\n try{\n const r=await fetch(`${CFG.apiUrl}?action=load`,{headers:{\"X-API-Key\":CFG.apiKey}});\n const d=await r.json();\n if(d.categorie) cats=d.categorie;\n if(d.disab) disab=d.disab;\n if(d.azienda){\n azienda=d.azienda;\n document.getElementById(\"nomeAzienda\").textContent=azienda;\n document.getElementById(\"footer-az\").textContent=azienda;\n }\n \/\/ Filtra le categorie: mostra solo prodotti disponibili\n cats = cats.map(c=>({\n ...c,\n prodotti: c.prodotti.filter(p=>!disab[c.nome+\"||\"+p])\n })).filter(c=>c.prodotti.length>0);\n }catch(e){ \/* usa default *\/ }\n qpCat=cats[0]?.nome||null;\n render();\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ TOAST\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nlet _tt=null;\nfunction toast(m){const el=document.getElementById(\"toast-el\");el.textContent=m;el.style.display=\"block\";clearTimeout(_tt);_tt=setTimeout(()=>el.style.display=\"none\",3500)}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ STEPS UI\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction updateSteps(){\n for(let i=1;i<=3;i++){\n const num=document.getElementById(`step${i}-num`);\n const lbl=document.getElementById(`step${i}-lbl`);\n if(!num)continue;\n num.className=\"step-num\"+(i<step?\" done\":i===step?\" active\":\"\");\n lbl.className=\"step-lbl\"+(i===step?\" active\":\"\");\n if(i<step) num.textContent=\"\u2713\";\n else num.textContent=i;\n }\n for(let i=1;i<=2;i++){\n const line=document.getElementById(`line${i}`);\n if(line) line.className=\"step-line\"+(i<step?\" done\":\"\");\n }\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ RENDER\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction render(){\n updateSteps();\n const mc=document.getElementById(\"main-content\");\n if(!mc)return;\n if(step===1) mc.innerHTML=rStep1();\n else if(step===2) mc.innerHTML=rStep2();\n else if(step===3) mc.innerHTML=rStep3();\n window.scrollTo({top:0,behavior:\"smooth\"});\n}\n\n\/\/ \u2500\u2500 STEP 1: DATI CLIENTE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction rStep1(){\n return`<div class=\"ani\">\n <div class=\"card\">\n <div class=\"card-title\"><span>\ud83d\udc64<\/span> I tuoi dati<\/div>\n <div class=\"fg\">\n <label class=\"lbl\">Nome <span class=\"req\">*<\/span><\/label>\n <input class=\"inp\" id=\"s1-nome\" value=\"${esc(ordine.nome)}\" placeholder=\"Mario\" autocomplete=\"given-name\">\n <\/div>\n <div class=\"fg\">\n <label class=\"lbl\">Cognome <span class=\"req\">*<\/span><\/label>\n <input class=\"inp\" id=\"s1-cognome\" value=\"${esc(ordine.cognome)}\" placeholder=\"Rossi\" autocomplete=\"family-name\">\n <\/div>\n <div class=\"fg\">\n <label class=\"lbl\">Telefono <span class=\"req\">*<\/span><\/label>\n <input class=\"inp\" id=\"s1-tel\" value=\"${esc(ordine.telefono)}\" placeholder=\"3xx xxxxxxx\" type=\"tel\" autocomplete=\"tel\">\n <\/div>\n <div class=\"fg\">\n <label class=\"lbl\">Email <span style=\"color:var(--sub);font-size:10px;font-weight:400;text-transform:none\">(per ricevere la conferma)<\/span><\/label>\n <input class=\"inp\" id=\"s1-email\" value=\"${esc(ordine.email)}\" placeholder=\"mario@email.it\" type=\"email\" autocomplete=\"email\">\n <\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"card-title\"><span>\ud83d\udcc5<\/span> Quando ritiri?<\/div>\n <div class=\"fg\">\n <label class=\"lbl\">Data di ritiro <span class=\"req\">*<\/span><\/label>\n <input class=\"inp\" id=\"s1-data\" type=\"date\" value=\"${esc(ordine.dataRitiro)}\" min=\"${tomorrow()}\">\n <\/div>\n <div class=\"fg\">\n <label class=\"lbl\">Fascia oraria<\/label>\n <div class=\"toggle-wrap\">\n <button class=\"toggle-btn${ordine.fas===\"mattina\"?\" on\":\"\"}\" onclick=\"setFas('mattina')\">\u2600\ufe0f Mattina<\/button>\n <button class=\"toggle-btn${ordine.fas===\"pomeriggio\"?\" on\":\"\"}\" onclick=\"setFas('pomeriggio')\">\ud83c\udf06 Pomeriggio<\/button>\n <\/div>\n <\/div>\n <\/div>\n <button class=\"btn-pri\" onclick=\"avanti1()\">Scegli i prodotti \u2192<\/button>\n <\/div>`;\n}\n\nfunction setFas(v){\n ordine.fas=v;\n document.querySelectorAll(\".toggle-btn\").forEach(b=>b.classList.toggle(\"on\",b.textContent.includes(v===\"mattina\"?\"Mattina\":\"Pomeriggio\")));\n}\n\nfunction avanti1(){\n const nome=document.getElementById(\"s1-nome\")?.value.trim();\n const cognome=document.getElementById(\"s1-cognome\")?.value.trim();\n const tel=document.getElementById(\"s1-tel\")?.value.trim();\n const email=document.getElementById(\"s1-email\")?.value.trim();\n const data=document.getElementById(\"s1-data\")?.value;\n let ok=true;\n if(!nome){document.getElementById(\"s1-nome\").classList.add(\"err\");ok=false;}else document.getElementById(\"s1-nome\").classList.remove(\"err\");\n if(!cognome){document.getElementById(\"s1-cognome\").classList.add(\"err\");ok=false;}else document.getElementById(\"s1-cognome\").classList.remove(\"err\");\n if(!tel){document.getElementById(\"s1-tel\").classList.add(\"err\");ok=false;}else document.getElementById(\"s1-tel\").classList.remove(\"err\");\n if(!data){document.getElementById(\"s1-data\").classList.add(\"err\");ok=false;}else document.getElementById(\"s1-data\").classList.remove(\"err\");\n if(!ok){toast(\"\u26a0\ufe0f Compila tutti i campi obbligatori\");return;}\n ordine.nome=nome;ordine.cognome=cognome;ordine.telefono=tel;ordine.email=email;ordine.dataRitiro=data;\n step=2;render();\n}\n\n\/\/ \u2500\u2500 STEP 2: PRODOTTI \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction rStep2(){\n if(!qpCat)qpCat=cats[0]?.nome||null;\n const cat=cats.find(c=>c.nome===qpCat)||cats[0];\n const selIds=new Set(ordine.prodotti.map(p=>p.prodotto));\n const tabs=cats.map(c=>`<button class=\"qp-tab${c.nome===qpCat?\" on\":\"\"}\" onclick=\"setTab('${esc(c.nome)}')\">${esc(c.nome)}<\/button>`).join(\"\");\n const grid=cat?cat.prodotti.map(p=>qpItem(p,cat.nome,selIds)).join(\"\"):\"\";\n const summary=ordine.prodotti.length>0?`<div class=\"sel-summary\">\n <div class=\"sel-sum-title\">\ud83d\uded2 Selezionati (${ordine.prodotti.length})<\/div>\n ${ordine.prodotti.map(pr=>`<div class=\"sel-sum-row\">\n <span class=\"sel-sum-nome\">${esc(pr.prodotto)}<\/span>\n <span class=\"sel-sum-qty\">${pr.q||\"\u2014\"}<\/span>\n <button class=\"sel-sum-del\" onclick=\"removeP('${esc(pr.prodotto)}')\">\u2715<\/button>\n <\/div>`).join(\"\")}\n <\/div>`:\"\";\n\n return`<div class=\"ani\">\n <div class=\"card\">\n <div class=\"card-title\"><span>\ud83c\udf7d<\/span> Cosa vuoi ordinare?<\/div>\n <p style=\"color:var(--sub);font-size:13px;margin-bottom:16px;margin-top:-10px\">Tocca un prodotto per selezionarlo, poi inserisci la quantit\u00e0<\/p>\n <div class=\"picker-wrap\">\n <div class=\"qp-tabs\">${tabs}<\/div>\n <div class=\"qp-grid\" id=\"qpg\">${grid}<\/div>\n <\/div>\n ${summary}\n <\/div>\n <div class=\"card\">\n <div class=\"card-title\"><span>\ud83d\udcdd<\/span> Note aggiuntive<\/div>\n <textarea class=\"inp\" id=\"s2-note\" rows=\"3\" placeholder=\"Allergie, preferenze, richieste particolari\u2026\" style=\"resize:vertical;min-height:80px\">${esc(ordine.note)}<\/textarea>\n <\/div>\n <button class=\"btn-pri\" onclick=\"avanti2()\">Riepilogo ordine \u2192<\/button>\n <button class=\"btn-sec\" onclick=\"indietro()\">\u2190 Torna indietro<\/button>\n <\/div>`;\n}\n\nfunction qpItem(p,catNome,selIds){\n const isSel=selIds.has(p);\n const pr=isSel?ordine.prodotti.find(x=>x.prodotto===p):null;\n return`<button class=\"qp-item${isSel?\" sel\":\"\"}\" onclick=\"toggleP('${esc(p)}','${esc(catNome)}')\">\n ${esc(p)}\n ${isSel?buildQtyHTML(p,pr.q||\"\"):`<div class=\"item-qty\"><\/div>`}\n <\/button>`;\n}\n\nfunction buildQtyHTML(prodotto,qVal){\n let num=\"\",unit=\"\",free=\"\",isLibero=false;\n if(qVal){\n const m=qVal.match(\/^(\\d+(?:[.,]\\d+)?)\\s*(.+)$\/);\n if(m){num=m[1];const u=m[2].trim();if(UNITS.includes(u)&&u!==\"\u270f\ufe0f libero\"){unit=u;}else{isLibero=true;free=qVal;}}\n else{isLibero=true;free=qVal;}\n }\n const pid=prodotto.replace(\/[^a-z0-9]\/gi,\"_\");\n const unitBtns=UNITS.map(u=>{\n const isL=u===\"\u270f\ufe0f libero\";const isOn=isL?isLibero:unit===u;\n return`<button type=\"button\" class=\"qty-unit${isL?\" libero\":\"\"}${isOn?\" on\":\"\"}\" onclick=\"event.stopPropagation();selUnit('${esc(prodotto)}','${esc(u)}')\">${esc(u)}<\/button>`;\n }).join(\"\");\n return`<div class=\"item-qty\" onclick=\"event.stopPropagation()\">\n <input type=\"number\" class=\"qty-num\" id=\"qn_${pid}\" placeholder=\"0\" value=\"${esc(num)}\" min=\"0\" step=\"0.1\"\n oninput=\"event.stopPropagation();updQty('${esc(prodotto)}')\" onclick=\"event.stopPropagation()\">\n <div class=\"qty-units\">${unitBtns}<\/div>\n <input type=\"text\" class=\"qty-free${isLibero?\" show\":\"\"}\" id=\"qf_${pid}\" placeholder=\"Testo libero\u2026\" value=\"${esc(free)}\"\n oninput=\"event.stopPropagation();updQtyFree('${esc(prodotto)}')\" onclick=\"event.stopPropagation()\">\n <\/div>`;\n}\n\nfunction selUnit(prodotto,unit){\n const pid=prodotto.replace(\/[^a-z0-9]\/gi,\"_\");\n const isLibero=unit===\"\u270f\ufe0f libero\";\n const p=ordine.prodotti.find(p=>p.prodotto===prodotto);if(!p)return;\n const cont=document.getElementById(\"qn_\"+pid)?.closest(\".item-qty\");\n if(cont){\n cont.querySelectorAll(\".qty-unit\").forEach(b=>b.classList.toggle(\"on\",b.textContent.trim()===unit));\n const fi=cont.querySelector(\".qty-free\");\n if(fi){fi.classList.toggle(\"show\",isLibero);if(!isLibero)fi.value=\"\";}\n }\n p._unit=isLibero?\"libero\":unit;\n if(isLibero){const fi=document.getElementById(\"qf_\"+pid);p.q=fi?fi.value:\"\";}\n else{const ni=document.getElementById(\"qn_\"+pid);const n=ni?ni.value:\"\";p.q=n?n+\" \"+unit:\"\";}\n}\n\nfunction updQty(prodotto){\n const pid=prodotto.replace(\/[^a-z0-9]\/gi,\"_\");\n const p=ordine.prodotti.find(x=>x.prodotto===prodotto);if(!p||p._unit===\"libero\")return;\n const ni=document.getElementById(\"qn_\"+pid);if(ni&&p._unit)p.q=ni.value?ni.value+\" \"+p._unit:\"\";\n}\n\nfunction updQtyFree(prodotto){\n const pid=prodotto.replace(\/[^a-z0-9]\/gi,\"_\");\n const p=ordine.prodotti.find(x=>x.prodotto===prodotto);if(!p)return;\n const fi=document.getElementById(\"qf_\"+pid);if(fi)p.q=fi.value;\n}\n\nfunction setTab(nome){\n \/\/ sincronizza quantit\u00e0 correnti prima di cambiare tab\n syncQty();\n qpCat=nome;\n const cat=cats.find(c=>c.nome===nome);\n const grid=document.getElementById(\"qpg\");if(!grid||!cat)return;\n document.querySelectorAll(\".qp-tab\").forEach(b=>b.classList.toggle(\"on\",b.textContent.trim()===nome));\n const selIds=new Set(ordine.prodotti.map(p=>p.prodotto));\n grid.innerHTML=cat.prodotti.map(p=>qpItem(p,nome,selIds)).join(\"\");\n}\n\nfunction syncQty(){\n document.querySelectorAll(\".qp-item.sel\").forEach(btn=>{\n const nome=btn.childNodes[0].textContent.trim();\n const p=ordine.prodotti.find(x=>x.prodotto===nome);if(!p)return;\n const pid=nome.replace(\/[^a-z0-9]\/gi,\"_\");\n if(p._unit===\"libero\"){const fi=document.getElementById(\"qf_\"+pid);if(fi)p.q=fi.value;}\n else if(p._unit){const ni=document.getElementById(\"qn_\"+pid);if(ni&&ni.value)p.q=ni.value+\" \"+p._unit;}\n });\n}\n\nfunction toggleP(prodotto,cat){\n syncQty();\n const idx=ordine.prodotti.findIndex(p=>p.prodotto===prodotto);\n if(idx>=0)ordine.prodotti.splice(idx,1);\n else ordine.prodotti.push({cat,prodotto,q:\"\",_unit:\"\"});\n refreshGrid();refreshSummary();\n}\n\nfunction removeP(prodotto){\n syncQty();\n ordine.prodotti=ordine.prodotti.filter(p=>p.prodotto!==prodotto);\n refreshGrid();refreshSummary();\n}\n\nfunction refreshGrid(){\n const cat=cats.find(c=>c.nome===qpCat);\n const grid=document.getElementById(\"qpg\");if(!grid||!cat)return;\n const selIds=new Set(ordine.prodotti.map(p=>p.prodotto));\n grid.innerHTML=cat.prodotti.map(p=>qpItem(p,qpCat,selIds)).join(\"\");\n}\n\nfunction refreshSummary(){\n const ex=document.querySelector(\".sel-summary\");if(ex)ex.remove();\n const card=document.querySelector(\".picker-wrap\")?.closest(\".card\");if(!card)return;\n if(ordine.prodotti.length>0){\n const d=document.createElement(\"div\");\n d.innerHTML=`<div class=\"sel-summary\">\n <div class=\"sel-sum-title\">\ud83d\uded2 Selezionati (${ordine.prodotti.length})<\/div>\n ${ordine.prodotti.map(pr=>`<div class=\"sel-sum-row\">\n <span class=\"sel-sum-nome\">${esc(pr.prodotto)}<\/span>\n <span class=\"sel-sum-qty\">${pr.q||\"\u2014\"}<\/span>\n <button class=\"sel-sum-del\" onclick=\"removeP('${esc(pr.prodotto)}')\">\u2715<\/button>\n <\/div>`).join(\"\")}\n <\/div>`;\n card.appendChild(d.firstElementChild);\n }\n}\n\nfunction avanti2(){\n syncQty();\n ordine.note=document.getElementById(\"s2-note\")?.value||\"\";\n if(!ordine.prodotti.length){toast(\"\u26a0\ufe0f Seleziona almeno un prodotto\");return;}\n step=3;render();\n}\nfunction indietro(){step--;render();}\n\n\/\/ \u2500\u2500 STEP 3: RIEPILOGO + INVIO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction rStep3(){\n return`<div class=\"ani\">\n <div class=\"card\">\n <div class=\"card-title\"><span>\ud83d\udccb<\/span> Riepilogo ordine<\/div>\n\n <div style=\"background:#f8fafc;border-radius:10px;padding:14px 16px;margin-bottom:16px\">\n <div style=\"display:flex;justify-content:space-between;margin-bottom:6px\">\n <span style=\"font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:700\">${esc(ordine.nome)} ${esc(ordine.cognome)}<\/span>\n <span style=\"background:${ordine.fas===\"mattina\"?\"#eff6ff\":\"#fffbeb\"};color:${ordine.fas===\"mattina\"?\"#1d56c7\":\"#92400e\"};border-radius:20px;padding:3px 11px;font-size:11px;font-weight:700\">${ordine.fas===\"mattina\"?\"\u2600\ufe0f Mattina\":\"\ud83c\udf06 Pomeriggio\"}<\/span>\n <\/div>\n <div style=\"font-size:13px;color:var(--sub)\">\ud83d\udcde ${esc(ordine.telefono)}<\/div>\n <div style=\"font-size:13px;color:var(--blu2);font-weight:600;margin-top:4px\">\ud83d\udecd Ritiro: ${fmtD(ordine.dataRitiro)}<\/div>\n <\/div>\n\n <div style=\"font-weight:700;color:var(--blu);font-size:11px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px\">Prodotti ordinati (${ordine.prodotti.length})<\/div>\n <div style=\"display:flex;flex-direction:column;gap:7px;margin-bottom:16px\">\n ${ordine.prodotti.map(pr=>`\n <div style=\"display:flex;align-items:center;justify-content:space-between;background:#f8fafc;border-radius:9px;padding:9px 13px;gap:10px;flex-wrap:wrap\">\n <span style=\"font-weight:600;font-size:13px;flex:1\">${esc(pr.prodotto)}<\/span>\n <span style=\"background:#bfdbfe;color:#1e40af;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700\">${esc(pr.q||\"qt\u00e0 n.d.\")}<\/span>\n <span style=\"background:#e0e7ff;color:#4338ca;border-radius:6px;padding:2px 8px;font-size:11px\">${esc(pr.cat)}<\/span>\n <\/div>`).join(\"\")}\n <\/div>\n ${ordine.note?`<div style=\"background:#fffbeb;border:1px solid #fde68a;border-radius:9px;padding:11px 14px;font-size:13px;color:#92400e\">\ud83d\udcdd ${esc(ordine.note)}<\/div>`:\"\"}\n <\/div>\n\n <button class=\"btn-pri\" id=\"invia-btn\" onclick=\"inviaOrdine()\">\n <span id=\"invia-txt\">\u2713 Conferma e invia ordine<\/span>\n <\/button>\n <button class=\"btn-sec\" onclick=\"indietro()\">\u2190 Modifica prodotti<\/button>\n <\/div>`;\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ INVIO ORDINE\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nasync function inviaOrdine(){\n const btn=document.getElementById(\"invia-btn\");\n const txt=document.getElementById(\"invia-txt\");\n btn.disabled=true;\n btn.innerHTML=`<div class=\"spinner\"><\/div> Invio in corso\u2026`;\n\n const prenotazione={\n id: uid(),\n nome: ordine.nome,\n cognome: ordine.cognome,\n telefono: ordine.telefono,\n email: ordine.email,\n dataPrenotazione: today(),\n dataRitiro: ordine.dataRitiro,\n fas: ordine.fas,\n prodotti: ordine.prodotti.map(p=>({id:uid(),cat:p.cat,prodotto:p.prodotto,q:p.q||\"\"})),\n note: ordine.note,\n fonte: \"cliente\"\n };\n\n try{\n const r=await fetch(`${CFG.apiUrl}?action=save_pren`,{\n method:\"POST\",\n headers:{\"Content-Type\":\"application\/json\",\"X-API-Key\":CFG.apiKey},\n body:JSON.stringify(prenotazione)\n });\n const d=await r.json();\n if(!d.ok) throw new Error(d.error||\"Errore server\");\n mostraSuccesso(prenotazione);\n }catch(e){\n btn.disabled=false;\n btn.innerHTML=`<span>\u2713 Conferma e invia ordine<\/span>`;\n toast(\"\u274c Errore durante l'invio. Riprova o contattaci direttamente.\");\n }\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ SCHERMATA SUCCESSO\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction mostraSuccesso(p){\n document.getElementById(\"steps-bar\").style.display=\"none\";\n const emailMsg = p.email\n ? `<p style=\"color:var(--sub);font-size:13px;margin-bottom:16px\">\ud83d\udce7 Abbiamo inviato una conferma a <strong>${esc(p.email)}<\/strong><\/p>`\n : `<p style=\"color:var(--sub);font-size:13px;margin-bottom:16px\">Per modifiche o info chiamaci direttamente.<\/p>`;\n document.getElementById(\"main-content\").innerHTML=`\n <div class=\"success-screen\">\n <div class=\"success-circle\">\n <svg viewBox=\"0 0 50 50\">\n <path d=\"M14 27 L22 35 L36 17\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n <h2 class=\"success-title\">Ordine inviato!<\/h2>\n <p class=\"success-sub\">Grazie ${esc(p.nome)}, abbiamo ricevuto il tuo ordine.<br>Ti aspettiamo il <strong>${fmtD(p.dataRitiro)}<\/strong> ${p.fas===\"mattina\"?\"in mattinata\":\"nel pomeriggio\"}.<\/p>\n <div class=\"success-box\">\n <div class=\"success-box-row\">\n <span class=\"success-box-lbl\">Nome<\/span>\n <span class=\"success-box-val\">${esc(p.nome)} ${esc(p.cognome)}<\/span>\n <\/div>\n <div class=\"success-box-row\">\n <span class=\"success-box-lbl\">Telefono<\/span>\n <span class=\"success-box-val\">${esc(p.telefono)}<\/span>\n <\/div>\n ${p.email?`<div class=\"success-box-row\">\n <span class=\"success-box-lbl\">Email<\/span>\n <span class=\"success-box-val\">${esc(p.email)}<\/span>\n <\/div>`:\"\"}\n <div class=\"success-box-row\">\n <span class=\"success-box-lbl\">Ritiro<\/span>\n <span class=\"success-box-val\">${fmtD(p.dataRitiro)} \u00b7 ${p.fas===\"mattina\"?\"\u2600\ufe0f Mattina\":\"\ud83c\udf06 Pomeriggio\"}<\/span>\n <\/div>\n <div class=\"success-box-row\">\n <span class=\"success-box-lbl\">Prodotti<\/span>\n <span class=\"success-box-val\">${p.prodotti.length} articol${p.prodotti.length===1?\"o\":\"i\"}<\/span>\n <\/div>\n <\/div>\n ${emailMsg}\n <button class=\"new-order-btn\" onclick=\"nuovoOrdine()\">\uff0b Fai un altro ordine<\/button>\n <\/div>`;\n}\n\nfunction nuovoOrdine(){\n ordine={nome:\"\",cognome:\"\",telefono:\"\",email:\"\",dataRitiro:\"\",fas:\"mattina\",prodotti:[],note:\"\"};\n step=1;\n document.getElementById(\"steps-bar\").style.display=\"flex\";\n render();\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ INIT\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nwindow.addEventListener(\"DOMContentLoaded\",()=>{\n \/\/ IMPORTANTE: questa pagina usa SEMPRE i valori di CFG scritti\n \/\/ in cima al file (apiUrl e apiKey). Non dipende dal browser,\n \/\/ quindi funziona identica su qualsiasi PC o telefono.\n if(CFG.apiUrl.includes(\"tuosito.it\")){\n document.getElementById(\"main-content\").innerHTML=`\n <div class=\"card\" style=\"text-align:center;padding:40px 24px\">\n <div style=\"font-size:40px;margin-bottom:14px\">\u26a0\ufe0f<\/div>\n <h2 style=\"font-family:'Cormorant Garamond',serif;font-size:22px;margin-bottom:10px\">Configurazione mancante<\/h2>\n <p style=\"color:var(--sub);font-size:14px;line-height:1.6\">Questa pagina non \u00e8 ancora collegata al database.<br>L'amministratore deve modificare i valori <b>apiUrl<\/b> e <b>apiKey<\/b> in cima al file HTML.<\/p>\n <\/div>`;\n document.getElementById(\"steps-bar\").style.display=\"none\";\n return;\n }\n loadConfig();\n});\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Prenota il tuo ordine \ud83c\udf7d La Mia Azienda Prenota il tuo ordine Scegli i prodotti, indica le quantit\u00e0 e invia \u2014 ti aspettiamo! Sarai ricontattato preventivamente 1 Chi sei 2 Prodotti 3 Conferma Powered by La Mia Azienda<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-626","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.pellitteri.net\/index.php?rest_route=\/wp\/v2\/pages\/626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pellitteri.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.pellitteri.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.pellitteri.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pellitteri.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=626"}],"version-history":[{"count":4,"href":"https:\/\/www.pellitteri.net\/index.php?rest_route=\/wp\/v2\/pages\/626\/revisions"}],"predecessor-version":[{"id":658,"href":"https:\/\/www.pellitteri.net\/index.php?rest_route=\/wp\/v2\/pages\/626\/revisions\/658"}],"wp:attachment":[{"href":"https:\/\/www.pellitteri.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}