Apni Choupati Token Booking Invoice<\/title>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf-autotable\/3.5.23\/jspdf.plugin.autotable.min.js\"><\/script>\n<style>\nbody { font-family: Arial,sans-serif; background:#f0f8ff; padding:20px; }\n.container { max-width:900px; margin:auto; background:#fff; padding:25px; border-radius:12px; box-shadow:0 5px 15px rgba(0,0,0,0.1); }\nh2 { text-align:center; color:#2c3e50; margin-bottom:20px; }\nlabel { display:block; margin-top:12px; font-weight:bold; color:#34495e; }\ninput, select { width:100%; padding:10px; margin-top:5px; border:1px solid #ccc; border-radius:6px; }\nbutton { margin-top:15px; padding:12px; width:100%; border:none; background:#27ae60; color:#fff; font-size:16px; border-radius:6px; cursor:pointer; }\nbutton:hover { background:#1e8449; }\nimg { max-width:150px; max-height:150px; margin-top:10px; border-radius:6px; display:none; }\n.qr-box { text-align:center; margin-top:15px; display:none; border:2px dashed #27ae60; padding:12px; border-radius:6px; background:#ecf9f1; }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n<h2>Apni Choupati Token Booking System<\/h2>\n\n<label>Select Token<\/label>\n<select id=\"tokenUniverseProduct\">\n<option value=\"\">— Select Token —<\/option>\n<option value=\"Tea|10\">Tea – \u20b910<\/option>\n<option value=\"Biscuits|5\">Biscuits – \u20b95<\/option>\n<option value=\"Snacks|20\">Snacks – \u20b920<\/option>\n<option value=\"Meal|120\">Meal – \u20b9120<\/option>\n<option value=\"Bakra|5000\">Bakra – \u20b95000<\/option>\n<option value=\"Bakkri|4500\">Bakkri – \u20b94500<\/option>\n<\/select>\n\n<label>Quantity<\/label>\n<input type=\"number\" id=\"tokenUniverseQty\" min=\"1\" value=\"1\">\n\n<label>Name<\/label>\n<input type=\"text\" id=\"tokenUniverseName\">\n\n<label>Mobile Number<\/label>\n<input type=\"text\" id=\"tokenUniverseMobile\">\n\n<label>Email<\/label>\n<input type=\"text\" id=\"tokenUniverseEmail\">\n\n<label>Address<\/label>\n<input type=\"text\" id=\"tokenUniverseAddress\">\n\n<label>Capture Photo<\/label>\n<input type=\"file\" id=\"tokenUniversePhoto\" accept=\"image\/*\" capture=\"environment\">\n<img id=\"tokenUniversePreview\">\n\n<div class=\"qr-box\" id=\"tokenUniverseQRBox\">\n<h3>Scan & Pay<\/h3>\n<img id=\"tokenUniverseQRCode\" width=\"200\">\n<p id=\"tokenUniverseAmountText\"><\/p>\n<\/div>\n\n<label>Transaction ID<\/label>\n<input type=\"text\" id=\"tokenUniverseTxnId\">\n\n<button id=\"tokenUniverseConfirmBtn\" onclick=\"tokenUniverseConfirmPayment()\">\u2705 Confirm Payment<\/button>\n<button id=\"tokenUniversePdfBtn\" onclick=\"tokenUniverseGeneratePDF()\" style=\"display:none;\">\u2b07\ufe0f Download PDF Invoice<\/button>\n\n<\/div>\n\n<script>\nlet tokenUniverseImage = \"\";\nconst tokenUniverseUPIId = \"spramderiya@oksbi\";\nlet tokenUniverseNumber = Math.floor(Math.random()*1000000);\n\n\/\/ Photo Upload Preview\ndocument.getElementById(\"tokenUniversePhoto\").addEventListener(\"change\", function(e){\n const file = e.target.files[0];\n if(file){\n const reader = new FileReader();\n reader.onload = function(event){\n tokenUniverseImage = event.target.result;\n const preview = document.getElementById(\"tokenUniversePreview\");\n preview.src = tokenUniverseImage;\n preview.style.display = \"block\";\n }\n reader.readAsDataURL(file);\n }\n});\n\n\/\/ Update QR Code\ndocument.getElementById(\"tokenUniverseProduct\").addEventListener(\"change\", updateTokenUniverseQR);\ndocument.getElementById(\"tokenUniverseQty\").addEventListener(\"input\", updateTokenUniverseQR);\n\nfunction updateTokenUniverseQR(){\n const productSelect = document.getElementById(\"tokenUniverseProduct\");\n const productValue = productSelect.value;\n const qty = parseInt(document.getElementById(\"tokenUniverseQty\").value) || 1;\n if(productValue){\n const [item, price] = productValue.split(\"|\");\n const total = price * qty;\n const url = \"https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=200x200&data=upi:\/\/pay?pa=\"+tokenUniverseUPIId+\"&pn=ApniChoupati&am=\"+total+\"&cu=INR\";\n document.getElementById(\"tokenUniverseQRCode\").src = url;\n document.getElementById(\"tokenUniverseAmountText\").innerText = \"Pay \u20b9\"+total+\" for \"+item+\" x\"+qty;\n document.getElementById(\"tokenUniverseQRBox\").style.display = \"block\";\n } else {\n document.getElementById(\"tokenUniverseQRBox\").style.display = \"none\";\n }\n}\n\n\/\/ Confirm Payment\nfunction tokenUniverseConfirmPayment(){\n const txnId = document.getElementById(\"tokenUniverseTxnId\").value;\n if(!txnId){ alert(\"Enter Transaction ID to confirm payment!\"); return; }\n alert(\"Payment Confirmed! You can now download PDF.\");\n document.getElementById(\"tokenUniversePdfBtn\").style.display = \"block\";\n}\n\n\/\/ Generate PDF\nfunction tokenUniverseGeneratePDF(){\n const productSelect = document.getElementById(\"tokenUniverseProduct\");\n if(!productSelect.value){ alert(\"Please select a token!\"); return; }\n const [item, price] = productSelect.value.split(\"|\");\n const qty = parseInt(document.getElementById(\"tokenUniverseQty\").value) || 1;\n const total = price * qty;\n const name = document.getElementById(\"tokenUniverseName\").value || \"-\";\n const mobile = document.getElementById(\"tokenUniverseMobile\").value || \"-\";\n const email = document.getElementById(\"tokenUniverseEmail\").value || \"-\";\n const address = document.getElementById(\"tokenUniverseAddress\").value || \"-\";\n const txnId = document.getElementById(\"tokenUniverseTxnId\").value || \"-\";\n const date = new Date().toLocaleString();\n\n const { jsPDF } = window.jspdf;\n const doc = new jsPDF();\n\n \/\/ Background\n doc.setFillColor(245,245,245);\n doc.rect(0,0,doc.internal.pageSize.getWidth(),doc.internal.pageSize.getHeight(),'F');\n\n \/\/ Header\n doc.setFontSize(22); doc.setTextColor(39,174,96);\n doc.text(\"Apni Choupati\", 105, 20, {align:\"center\"});\n doc.setFontSize(16); doc.setTextColor(44,62,80);\n doc.text(\"Token Booking Invoice\", 105, 28, {align:\"center\"});\n doc.setFontSize(12); doc.setTextColor(44,62,80);\n doc.text(\"Date & Time: \" + date, 14, 38);\n doc.text(\"Token Number: \" + tokenUniverseNumber, 14, 45);\n\n \/\/ Customer Table\n doc.autoTable({\n startY: 55,\n head:[[\"Name\",\"Mobile\",\"Email\",\"Address\"]],\n body:[[name,mobile,email,address]],\n theme:'grid',\n headStyles:{fillColor:[52,152,219], textColor:255},\n styles:{fillColor:[220,235,252]}\n });\n\n \/\/ Product Table\n doc.autoTable({\n startY: doc.lastAutoTable.finalY + 10,\n head:[[\"Token\",\"Rate\",\"Qty\",\"Total\"]],\n body:[[item,\"\u20b9\"+price,qty,\"\u20b9\"+total]],\n theme:'grid',\n headStyles:{fillColor:[39,174,96], textColor:255},\n styles:{fillColor:[220,255,220]}\n });\n\n \/\/ Transaction Table\n doc.autoTable({\n startY: doc.lastAutoTable.finalY + 10,\n head:[[\"Transaction ID\",\"Paid Amount\",\"QR Payment\"]],\n body:[[txnId,\"\u20b9\"+total,\"See QR Above\"]],\n theme:'grid',\n headStyles:{fillColor:[231,76,60], textColor:255},\n styles:{fillColor:[255,220,220]}\n });\n\n \/\/ Uploaded Photo\n if(tokenUniverseImage){\n doc.addImage(tokenUniverseImage,\"JPEG\",150,70,50,50);\n }\n\n \/\/ Footer Signature\n let y = doc.lastAutoTable.finalY + 30;\n doc.text(\"Authorized Signature: ____________________\",14,y);\n\n \/\/ Save PDF\n doc.save(\"ApniChoupati_TokenInvoice.pdf\");\n}\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Apni Choupati Token Booking Invoice Apni Choupati Token Booking System Select Token — Select Token —Tea – \u20b910Biscuits – \u20b95Snacks – \u20b920Meal – \u20b9120Bakra – \u20b95000Bakkri – \u20b94500 Quantity Name Mobile Number Email Address Capture Photo Scan & Pay Transaction ID \u2705 Confirm Payment \u2b07\ufe0f Download PDF Invoice<\/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-319","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/breakfasthouse.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages\/319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/breakfasthouse.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/breakfasthouse.sabpro.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/breakfasthouse.sabpro.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/breakfasthouse.sabpro.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=319"}],"version-history":[{"count":1,"href":"https:\/\/breakfasthouse.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages\/319\/revisions"}],"predecessor-version":[{"id":320,"href":"https:\/\/breakfasthouse.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages\/319\/revisions\/320"}],"wp:attachment":[{"href":"https:\/\/breakfasthouse.sabpro.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":319,"date":"2025-09-09T15:35:57","date_gmt":"2025-09-09T15:35:57","guid":{"rendered":"https:\/\/breakfasthouse.sabpro.in\/?page_id=319"},"modified":"2025-09-09T15:35:57","modified_gmt":"2025-09-09T15:35:57","slug":"aapni-choupati-tokan","status":"publish","type":"page","link":"https:\/\/breakfasthouse.sabpro.in\/?page_id=319","title":{"rendered":"Aapni Choupati Tokan"},"content":{"rendered":"\n\n\n\n\nApni Choupati Token Booking Invoice<\/title>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf-autotable\/3.5.23\/jspdf.plugin.autotable.min.js\"><\/script>\n<style>\nbody { font-family: Arial,sans-serif; background:#f0f8ff; padding:20px; }\n.container { max-width:900px; margin:auto; background:#fff; padding:25px; border-radius:12px; box-shadow:0 5px 15px rgba(0,0,0,0.1); }\nh2 { text-align:center; color:#2c3e50; margin-bottom:20px; }\nlabel { display:block; margin-top:12px; font-weight:bold; color:#34495e; }\ninput, select { width:100%; padding:10px; margin-top:5px; border:1px solid #ccc; border-radius:6px; }\nbutton { margin-top:15px; padding:12px; width:100%; border:none; background:#27ae60; color:#fff; font-size:16px; border-radius:6px; cursor:pointer; }\nbutton:hover { background:#1e8449; }\nimg { max-width:150px; max-height:150px; margin-top:10px; border-radius:6px; display:none; }\n.qr-box { text-align:center; margin-top:15px; display:none; border:2px dashed #27ae60; padding:12px; border-radius:6px; background:#ecf9f1; }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n<h2>Apni Choupati Token Booking System<\/h2>\n\n<label>Select Token<\/label>\n<select id=\"tokenUniverseProduct\">\n<option value=\"\">— Select Token —<\/option>\n<option value=\"Tea|10\">Tea – \u20b910<\/option>\n<option value=\"Biscuits|5\">Biscuits – \u20b95<\/option>\n<option value=\"Snacks|20\">Snacks – \u20b920<\/option>\n<option value=\"Meal|120\">Meal – \u20b9120<\/option>\n<option value=\"Bakra|5000\">Bakra – \u20b95000<\/option>\n<option value=\"Bakkri|4500\">Bakkri – \u20b94500<\/option>\n<\/select>\n\n<label>Quantity<\/label>\n<input type=\"number\" id=\"tokenUniverseQty\" min=\"1\" value=\"1\">\n\n<label>Name<\/label>\n<input type=\"text\" id=\"tokenUniverseName\">\n\n<label>Mobile Number<\/label>\n<input type=\"text\" id=\"tokenUniverseMobile\">\n\n<label>Email<\/label>\n<input type=\"text\" id=\"tokenUniverseEmail\">\n\n<label>Address<\/label>\n<input type=\"text\" id=\"tokenUniverseAddress\">\n\n<label>Capture Photo<\/label>\n<input type=\"file\" id=\"tokenUniversePhoto\" accept=\"image\/*\" capture=\"environment\">\n<img id=\"tokenUniversePreview\">\n\n<div class=\"qr-box\" id=\"tokenUniverseQRBox\">\n<h3>Scan & Pay<\/h3>\n<img id=\"tokenUniverseQRCode\" width=\"200\">\n<p id=\"tokenUniverseAmountText\"><\/p>\n<\/div>\n\n<label>Transaction ID<\/label>\n<input type=\"text\" id=\"tokenUniverseTxnId\">\n\n<button id=\"tokenUniverseConfirmBtn\" onclick=\"tokenUniverseConfirmPayment()\">\u2705 Confirm Payment<\/button>\n<button id=\"tokenUniversePdfBtn\" onclick=\"tokenUniverseGeneratePDF()\" style=\"display:none;\">\u2b07\ufe0f Download PDF Invoice<\/button>\n\n<\/div>\n\n<script>\nlet tokenUniverseImage = \"\";\nconst tokenUniverseUPIId = \"spramderiya@oksbi\";\nlet tokenUniverseNumber = Math.floor(Math.random()*1000000);\n\n\/\/ Photo Upload Preview\ndocument.getElementById(\"tokenUniversePhoto\").addEventListener(\"change\", function(e){\n const file = e.target.files[0];\n if(file){\n const reader = new FileReader();\n reader.onload = function(event){\n tokenUniverseImage = event.target.result;\n const preview = document.getElementById(\"tokenUniversePreview\");\n preview.src = tokenUniverseImage;\n preview.style.display = \"block\";\n }\n reader.readAsDataURL(file);\n }\n});\n\n\/\/ Update QR Code\ndocument.getElementById(\"tokenUniverseProduct\").addEventListener(\"change\", updateTokenUniverseQR);\ndocument.getElementById(\"tokenUniverseQty\").addEventListener(\"input\", updateTokenUniverseQR);\n\nfunction updateTokenUniverseQR(){\n const productSelect = document.getElementById(\"tokenUniverseProduct\");\n const productValue = productSelect.value;\n const qty = parseInt(document.getElementById(\"tokenUniverseQty\").value) || 1;\n if(productValue){\n const [item, price] = productValue.split(\"|\");\n const total = price * qty;\n const url = \"https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=200x200&data=upi:\/\/pay?pa=\"+tokenUniverseUPIId+\"&pn=ApniChoupati&am=\"+total+\"&cu=INR\";\n document.getElementById(\"tokenUniverseQRCode\").src = url;\n document.getElementById(\"tokenUniverseAmountText\").innerText = \"Pay \u20b9\"+total+\" for \"+item+\" x\"+qty;\n document.getElementById(\"tokenUniverseQRBox\").style.display = \"block\";\n } else {\n document.getElementById(\"tokenUniverseQRBox\").style.display = \"none\";\n }\n}\n\n\/\/ Confirm Payment\nfunction tokenUniverseConfirmPayment(){\n const txnId = document.getElementById(\"tokenUniverseTxnId\").value;\n if(!txnId){ alert(\"Enter Transaction ID to confirm payment!\"); return; }\n alert(\"Payment Confirmed! You can now download PDF.\");\n document.getElementById(\"tokenUniversePdfBtn\").style.display = \"block\";\n}\n\n\/\/ Generate PDF\nfunction tokenUniverseGeneratePDF(){\n const productSelect = document.getElementById(\"tokenUniverseProduct\");\n if(!productSelect.value){ alert(\"Please select a token!\"); return; }\n const [item, price] = productSelect.value.split(\"|\");\n const qty = parseInt(document.getElementById(\"tokenUniverseQty\").value) || 1;\n const total = price * qty;\n const name = document.getElementById(\"tokenUniverseName\").value || \"-\";\n const mobile = document.getElementById(\"tokenUniverseMobile\").value || \"-\";\n const email = document.getElementById(\"tokenUniverseEmail\").value || \"-\";\n const address = document.getElementById(\"tokenUniverseAddress\").value || \"-\";\n const txnId = document.getElementById(\"tokenUniverseTxnId\").value || \"-\";\n const date = new Date().toLocaleString();\n\n const { jsPDF } = window.jspdf;\n const doc = new jsPDF();\n\n \/\/ Background\n doc.setFillColor(245,245,245);\n doc.rect(0,0,doc.internal.pageSize.getWidth(),doc.internal.pageSize.getHeight(),'F');\n\n \/\/ Header\n doc.setFontSize(22); doc.setTextColor(39,174,96);\n doc.text(\"Apni Choupati\", 105, 20, {align:\"center\"});\n doc.setFontSize(16); doc.setTextColor(44,62,80);\n doc.text(\"Token Booking Invoice\", 105, 28, {align:\"center\"});\n doc.setFontSize(12); doc.setTextColor(44,62,80);\n doc.text(\"Date & Time: \" + date, 14, 38);\n doc.text(\"Token Number: \" + tokenUniverseNumber, 14, 45);\n\n \/\/ Customer Table\n doc.autoTable({\n startY: 55,\n head:[[\"Name\",\"Mobile\",\"Email\",\"Address\"]],\n body:[[name,mobile,email,address]],\n theme:'grid',\n headStyles:{fillColor:[52,152,219], textColor:255},\n styles:{fillColor:[220,235,252]}\n });\n\n \/\/ Product Table\n doc.autoTable({\n startY: doc.lastAutoTable.finalY + 10,\n head:[[\"Token\",\"Rate\",\"Qty\",\"Total\"]],\n body:[[item,\"\u20b9\"+price,qty,\"\u20b9\"+total]],\n theme:'grid',\n headStyles:{fillColor:[39,174,96], textColor:255},\n styles:{fillColor:[220,255,220]}\n });\n\n \/\/ Transaction Table\n doc.autoTable({\n startY: doc.lastAutoTable.finalY + 10,\n head:[[\"Transaction ID\",\"Paid Amount\",\"QR Payment\"]],\n body:[[txnId,\"\u20b9\"+total,\"See QR Above\"]],\n theme:'grid',\n headStyles:{fillColor:[231,76,60], textColor:255},\n styles:{fillColor:[255,220,220]}\n });\n\n \/\/ Uploaded Photo\n if(tokenUniverseImage){\n doc.addImage(tokenUniverseImage,\"JPEG\",150,70,50,50);\n }\n\n \/\/ Footer Signature\n let y = doc.lastAutoTable.finalY + 30;\n doc.text(\"Authorized Signature: ____________________\",14,y);\n\n \/\/ Save PDF\n doc.save(\"ApniChoupati_TokenInvoice.pdf\");\n}\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Apni Choupati Token Booking Invoice Apni Choupati Token Booking System Select Token — Select Token —Tea – \u20b910Biscuits – \u20b95Snacks – \u20b920Meal – \u20b9120Bakra – \u20b95000Bakkri – \u20b94500 Quantity Name Mobile Number Email Address Capture Photo Scan & Pay Transaction ID \u2705 Confirm Payment \u2b07\ufe0f Download PDF Invoice<\/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-319","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/breakfasthouse.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages\/319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/breakfasthouse.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/breakfasthouse.sabpro.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/breakfasthouse.sabpro.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/breakfasthouse.sabpro.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=319"}],"version-history":[{"count":1,"href":"https:\/\/breakfasthouse.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages\/319\/revisions"}],"predecessor-version":[{"id":320,"href":"https:\/\/breakfasthouse.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages\/319\/revisions\/320"}],"wp:attachment":[{"href":"https:\/\/breakfasthouse.sabpro.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}