Happy Camel Safari \u2014 Full Booking System<\/title>\n\n\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\n<style>\n :root{\n --bg:#fffaf0; --card:#ffffff; --accent:#8B4513; --muted:#6b5b4a; --gold:#c99a52;\n }\n body{font-family:Arial,Helvetica,sans-serif;background:var(--bg);margin:0;padding:22px;color:#222}\n .wrap{max-width:1150px;margin:0 auto}\n h1{text-align:center;color:var(--accent);margin-bottom:10px}\n .grid{display:grid;grid-template-columns:1fr 420px;gap:18px}\n .card{background:var(--card);border-radius:12px;padding:16px;box-shadow:0 6px 18px rgba(0,0,0,0.06);border:1px solid #eee}\n label{display:block;font-weight:700;margin-top:10px;color:var(--muted)}\n input[type=\"text\"], input[type=\"email\"], input[type=\"tel\"], input[type=\"date\"], input[type=\"number\"], select, textarea{\n width:100%;padding:10px;margin-top:6px;border-radius:8px;border:1px solid #d6cdbf;font-size:14px;\n }\n .preview{max-width:160px;border-radius:8px;border:1px solid #ddd;display:block;margin-top:8px}\n .small{font-size:13px;color:#666;margin-top:6px}\n .total{font-size:18px;font-weight:800;color:#b22222;text-align:center;margin:12px 0}\n .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}\n button{background:var(--accent);color:#fff;border:0;padding:12px 14px;border-radius:8px;cursor:pointer;font-weight:700}\n button.ghost{background:#eee;color:#333}\n .qrcode-wrap{background:#fff;padding:12px;border-radius:8px;border:1px dashed #e6d8c2;text-align:center}\n .note{margin-top:12px;padding:10px;border-radius:8px;background:#fff9ec;border:1px solid #f0e2c8;color:#5f4b2b}\n .footer-note{font-size:13px;color:#444;margin-top:12px}\n @media(max-width:1040px){ .grid{grid-template-columns:1fr} .preview{max-width:120px} }\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\">\n <h1>Happy Camel Safari \u2014 Booking & Receipt System<\/h1>\n\n <div class=\"grid\">\n \n <div class=\"card\">\n <h3>Customer Details<\/h3>\n <label>Full Name<\/label>\n <input id=\"name\" type=\"text\" placeholder=\"Guest name\">\n\n <label>Email<\/label>\n <input id=\"email\" type=\"email\" placeholder=\"guest@example.com\">\n\n <label>Mobile<\/label>\n <input id=\"mobile\" type=\"tel\" placeholder=\"+91XXXXXXXXXX\">\n\n <label>Upload Face Photo (JPG\/PNG)<\/label>\n <input id=\"photo\" type=\"file\" accept=\"image\/*\">\n\n <img id=\"photoPreview\" class=\"preview\" style=\"display:none\" alt=\"photo preview\">\n\n <label>Upload ID Proof (JPG\/PNG\/PDF)<\/label>\n <input id=\"idproof\" type=\"file\" accept=\"image\/*,application\/pdf\">\n\n <img id=\"idPreview\" class=\"preview\" style=\"display:none\" alt=\"id preview\">\n <div id=\"pdfNote\" class=\"small\" style=\"display:none;color:#5f4b2b\"><\/div>\n\n <hr style=\"margin:16px 0;border:none;border-top:1px solid #eee\">\n\n <h3>Booking Details<\/h3>\n <label>Tour Type<\/label>\n <select id=\"tourType\">\n <option value=\"Camel Safari\">Camel Safari<\/option>\n <option value=\"Jeep Safari\">Jeep Safari<\/option>\n <option value=\"Fort Tour\">Fort Tour<\/option>\n <option value=\"Sport Goa Package\">Sport Goa Package<\/option>\n <\/select>\n\n <label>Package \/ Rate<\/label>\n <select id=\"packageRate\" onchange=\"updateAll()\">\n \n <option value=\"1000\" data-mode=\"hour\">1 Hour Safari \u2014 \u20b91,000 \/ hour<\/option>\n <option value=\"2500\" data-mode=\"halfday\">Half Day \u2014 \u20b92,500<\/option>\n <option value=\"4500\" data-mode=\"fullday\">Full Day \u2014 \u20b94,500<\/option>\n <option value=\"8000\" data-mode=\"package\">Sport Goa 3 Days \u2014 \u20b98,000 \/ person<\/option>\n <\/select>\n\n <label>Category<\/label>\n <select id=\"category\" onchange=\"updateAll()\">\n <option value=\"1\">Standard (x1)<\/option>\n <option value=\"1.25\">First Class (x1.25)<\/option>\n <option value=\"1.6\">High Class (x1.6)<\/option>\n <\/select>\n\n <div style=\"display:flex;gap:10px;margin-top:12px;\">\n <div style=\"flex:1\">\n <label>Hours<\/label>\n <select id=\"hours\" onchange=\"updateAll()\">\n <option value=\"1\">1<\/option><option value=\"2\">2<\/option><option value=\"3\">3<\/option>\n <option value=\"4\">4<\/option><option value=\"5\">5<\/option><option value=\"8\">8<\/option>\n <\/select>\n <\/div>\n <div style=\"width:120px\">\n <label>Minutes<\/label>\n <select id=\"minutes\" onchange=\"updateAll()\">\n <option value=\"0\">0<\/option><option value=\"15\">15<\/option><option value=\"30\">30<\/option><option value=\"45\">45<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <label style=\"margin-top:12px\">Number of People<\/label>\n <input id=\"people\" type=\"number\" min=\"1\" value=\"1\" onchange=\"updateAll()\">\n\n <div class=\"total\" id=\"total\">Total: \u20b9 1000<\/div>\n\n <div class=\"note\">\n <strong>UPI \/ Paytm \/ GooglePay<\/strong><br>\n Pay using the QR on the right. After payment, enter your Transaction ID and click <em>Confirm Booking<\/em>.\n <\/div>\n\n <\/div>\n\n \n <div>\n <div class=\"card\">\n <h3 style=\"margin-top:0\">Payment & QR<\/h3>\n <div class=\"qrcode-wrap\">\n <div id=\"qrClickWrap\" style=\"display:inline-block;cursor:pointer\"><\/div>\n <div class=\"small\" style=\"margin-top:8px\">Tap \/ Scan to open UPI app. Amount auto-filled.<\/div>\n <div style=\"margin-top:8px\" class=\"small\">UPI ID: <b id=\"upiSpan\">happycamelsafari@upi<\/b><\/div>\n <\/div>\n\n <label style=\"margin-top:12px\">Enter Transaction ID<\/label>\n <input id=\"txn\" type=\"text\" placeholder=\"e.g. TXN1234567890\">\n\n <div class=\"actions\">\n <button id=\"confirmBtn\">\u2705 Confirm Booking<\/button>\n <button id=\"resetBtn\" class=\"ghost\">Reset<\/button>\n <\/div>\n\n <div id=\"afterArea\" style=\"display:none;margin-top:12px\">\n <div class=\"small\" style=\"margin-bottom:8px\">Booking confirmed. Download receipt or share:<\/div>\n <div class=\"actions\">\n <button id=\"downloadPdfBtn\" style=\"background:#2E7D32\">\ud83d\udce5 Download PDF<\/button>\n <a id=\"whatsappBtn\" target=\"_blank\" style=\"text-decoration:none\"><button style=\"background:#25D366\">\ud83d\udcf2 Share on WhatsApp<\/button><\/a>\n <\/div>\n\n <div class=\"footer-note\">\n <strong>Note:<\/strong> After downloading the PDF, please share it on WhatsApp to speed up confirmation.\n <\/div>\n <\/div>\n\n <\/div>\n\n <div class=\"card\" style=\"margin-top:14px\">\n <h3 style=\"margin-top:0\">Quick Preview<\/h3>\n <div><b>Face Photo:<\/b><\/div>\n <img id=\"faceSmall\" class=\"preview\" style=\"display:none\">\n <div style=\"margin-top:8px\"><b>ID Preview:<\/b><\/div>\n <img id=\"idSmall\" class=\"preview\" style=\"display:none\">\n <div id=\"idPdfNote\" class=\"small\" style=\"display:none;color:#6b5b4a\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n\/* -------- CONFIG -------- *\/\nconst MERCHANT = \"Happy Camel Safari\";\nconst UPI_VPA = \"happycamelsafari@upi\"; \/\/ change to your VPA\n\/* -------- END CONFIG ---- *\/\n\nlet photoBase64 = \"\";\nlet idBase64 = \"\";\nlet idIsPDF = false;\nlet booking = null;\n\n\/\/ DOM refs\nconst packageRateEl = document.getElementById('packageRate');\nconst categoryEl = document.getElementById('category');\nconst hoursEl = document.getElementById('hours');\nconst minutesEl = document.getElementById('minutes');\nconst peopleEl = document.getElementById('people');\nconst totalEl = document.getElementById('total');\nconst qrWrap = document.getElementById('qrClickWrap');\nconst upiSpan = document.getElementById('upiSpan');\n\n\/\/ read files and preview\ndocument.getElementById('photo').addEventListener('change', function(e){\n const f = e.target.files && e.target.files[0];\n if(!f) return;\n const r = new FileReader();\n r.onload = function(){ photoBase64 = r.result; document.getElementById('photoPreview').src = photoBase64; document.getElementById('photoPreview').style.display='block'; document.getElementById('faceSmall').src=photoBase64; document.getElementById('faceSmall').style.display='block'; }\n r.readAsDataURL(f);\n});\ndocument.getElementById('idproof').addEventListener('change', function(e){\n const f = e.target.files && e.target.files[0];\n if(!f) return;\n const r = new FileReader();\n r.onload = function(){\n idBase64 = r.result;\n const idImg = document.getElementById('idPreview');\n const idSmall = document.getElementById('idSmall');\n if(f.type === 'application\/pdf'){\n idIsPDF = true;\n idImg.style.display='none';\n idSmall.style.display='none';\n document.getElementById('pdfNote').innerText = \"ID uploaded as PDF (will be referenced in receipt).\";\n document.getElementById('pdfNote').style.display='block';\n document.getElementById('idPdfNote').innerText = \"ID uploaded as PDF.\";\n document.getElementById('idPdfNote').style.display = 'block';\n } else {\n idIsPDF = false;\n idImg.src = idBase64; idImg.style.display='block';\n idSmall.src = idBase64; idSmall.style.display='block';\n const pdfNote = document.getElementById('pdfNote'); if(pdfNote) pdfNote.style.display='none';\n const idPdfNote = document.getElementById('idPdfNote'); if(idPdfNote) idPdfNote.style.display='none';\n }\n };\n r.readAsDataURL(f);\n});\n\n\/\/ update total & QR\nfunction updateAll(){\n const base = parseFloat(packageRateEl.value || 0);\n const mode = packageRateEl.options[packageRateEl.selectedIndex].dataset.mode || 'hour';\n const catMul = parseFloat(categoryEl.value || 1);\n const hours = parseInt(hoursEl.value || 0);\n const minutes = parseInt(minutesEl.value || 0);\n const people = parseInt(peopleEl.value || 1);\n\n \/\/ compute total \u2014 if package is per person (package types), treat accordingly, else hours * rate\n let total = 0;\n if(mode === 'package' || mode === 'halfday' || mode === 'fullday'){\n \/\/ treat base as per person package price\n total = base * people * catMul;\n } else {\n \/\/ hourly type\n let hoursDecimal = hours + (minutes\/60);\n if(hoursDecimal <= 0) hoursDecimal = 1;\n total = Math.round(base * hoursDecimal * people * catMul);\n }\n\n totalEl.innerText = \"Total: \u20b9 \" + total;\n\n \/\/ Build UPI deep link\n const selText = packageRateEl.options[packageRateEl.selectedIndex].text;\n const upiLink = `upi:\/\/pay?pa=${encodeURIComponent(UPI_VPA)}&pn=${encodeURIComponent(MERCHANT)}&am=${encodeURIComponent(total)}&cu=INR&tn=${encodeURIComponent('Booking '+selText)}`;\n\n \/\/ QR using qrserver (image)\n qrWrap.innerHTML = '';\n const img = document.createElement('img');\n img.src = 'https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=260x260&data=' + encodeURIComponent(upiLink);\n img.alt = 'UPI QR';\n img.style.border = '6px solid #fff';\n img.style.borderRadius = '12px';\n img.style.boxShadow = '0 6px 18px rgba(0,0,0,0.08)';\n img.style.cursor = 'pointer';\n img.onclick = function(){ window.location.href = upiLink; };\n qrWrap.appendChild(img);\n\n upiSpan.innerText = UPI_VPA;\n}\npackageRateEl.addEventListener('change', updateAll);\ncategoryEl.addEventListener('change', updateAll);\nhoursEl.addEventListener('change', updateAll);\nminutesEl.addEventListener('change', updateAll);\npeopleEl.addEventListener('input', updateAll);\nupdateAll();\n\n\/\/ reset\ndocument.getElementById('resetBtn').addEventListener('click', function(){\n if(!confirm('Reset form?')) return;\n document.getElementById('name').value=''; document.getElementById('email').value=''; document.getElementById('mobile').value='';\n document.getElementById('photo').value=''; document.getElementById('idproof').value='';\n photoBase64 = ''; idBase64 = ''; idIsPDF = false;\n document.getElementById('photoPreview').style.display='none'; document.getElementById('idPreview').style.display='none';\n document.getElementById('faceSmall').style.display='none'; document.getElementById('idSmall').style.display='none';\n document.getElementById('pdfNote').style.display='none'; document.getElementById('idPdfNote').style.display='none';\n document.getElementById('txn').value='';\n document.getElementById('afterArea').style.display='none';\n booking = null;\n updateAll();\n});\n\n\/\/ confirm booking (validate, snapshot, enable PDF & WA)\ndocument.getElementById('confirmBtn').addEventListener('click', function(){\n const name = (document.getElementById('name').value || '').trim();\n const mobile = (document.getElementById('mobile').value || '').trim();\n const date = (document.getElementById('date').value || (new Date()).toISOString().slice(0,10));\n const txn = (document.getElementById('txn').value || '').trim();\n\n if(!name){ alert('Please enter name'); return; }\n if(!mobile){ alert('Please enter mobile'); return; }\n if(!txn){ alert('Please enter transaction ID (after payment)'); return; }\n\n \/\/ snapshot\n const sel = packageRateEl;\n const packageText = sel.options[sel.selectedIndex].text;\n const pricePer = parseFloat(sel.value);\n const people = parseInt(peopleEl.value || 1);\n\n \/\/ compute total again\n const totalText = totalEl.innerText.replace('Total: \u20b9','').trim();\n const total = isNaN(Number(totalText)) ? 0 : Number(totalText);\n\n booking = {\n name, email: document.getElementById('email').value || '',\n mobile, date, packageText, pricePer, people, total,\n notes: document.getElementById('notes') ? document.getElementById('notes').value : '',\n txn, photoBase64, idBase64, idIsPDF\n };\n\n \/\/ show after area\n document.getElementById('afterArea').style.display='block';\n\n \/\/ prepare whatsapp message\n const waMsg = `Happy Camel Safari Booking\\nName: ${booking.name}\\nMobile: ${booking.mobile}\\nDate: ${booking.date}\\nPackage: ${booking.packageText}\\nTravellers: ${booking.people}\\nTotal: \u20b9${booking.total}\\nTxnID: ${booking.txn}`;\n document.getElementById('whatsappBtn').href = 'https:\/\/wa.me\/?text=' + encodeURIComponent(waMsg);\n});\n\n\/\/ PDF generation\ndocument.getElementById('downloadPdfBtn').addEventListener('click', function(){\n if(!booking){ alert('Please confirm booking first'); return; }\n const { jsPDF } = window.jspdf;\n const doc = new jsPDF({unit:'pt', format:'a4'});\n const pageW = doc.internal.pageSize.getWidth();\n const margin = 36;\n\n \/\/ Watermark\n doc.setFontSize(60);\n doc.setTextColor(240,240,240);\n doc.text(MERCHANT, pageW\/2, 420, {align:'center', angle:45});\n doc.setTextColor(0,0,0);\n\n \/\/ Header rectangle with border (professional)\n doc.setDrawColor(139,69,19);\n doc.setFillColor(139,69,19); \/\/ brown fill\n doc.rect(margin, 24, pageW - margin*2, 34, 'F'); \/\/ filled bar\n doc.setFontSize(16);\n doc.setTextColor(255,255,255);\n doc.text(`${MERCHANT} \u2014 Booking Receipt`, pageW\/2, 48, {align:'center'});\n\n \/\/ Sub header\n doc.setFontSize(10);\n doc.setTextColor(120,120,120);\n doc.text('Booking Confirmation \u2014 Keep this receipt for reference', margin, 66);\n\n \/\/ Decorative short line (under header)\n doc.setDrawColor(200,170,120);\n doc.setLineWidth(1);\n doc.line(margin, 72, pageW - margin - 200, 72);\n\n \/\/ Prepare table data\n const tableData = [\n ['Guest Name', booking.name],\n ['Email', booking.email || '\u2014'],\n ['Mobile', booking.mobile],\n ['Booking Date', booking.date],\n ['Package', booking.packageText],\n ['Price \/ Unit', '\u20b9 ' + booking.pricePer],\n ['No. of Travellers', booking.people.toString()],\n ['Total Amount', '\u20b9 ' + booking.total],\n ['Transaction ID', booking.txn],\n ['Notes', booking.notes || '\u2014'],\n ['Guide ID', 'G-2025-001'],\n ['Hotel ID', 'H-2025-001']\n ];\n\n doc.autoTable({\n startY: 88,\n head: [['Field','Details']],\n body: tableData,\n theme: 'grid',\n headStyles: {fillColor: [139,69,19], textColor:255, fontStyle:'bold'},\n styles: {fontSize:11, cellPadding:6},\n columnStyles: {0: {fontStyle: 'bold', cellWidth: 120}}\n });\n\n \/\/ place photos side-by-side right of table\n const tableBottom = doc.lastAutoTable ? doc.lastAutoTable.finalY : 200;\n const imgX = pageW - margin - 240;\n let imgY = tableBottom + 14;\n const imgW = 105;\n const imgH = 105;\n\n if(booking.photoBase64){\n try{\n doc.setFontSize(9);\n doc.text('Customer Photo', imgX, imgY - 6);\n doc.addImage(booking.photoBase64, imgX, imgY, imgW, imgH);\n }catch(e){ console.warn('photo add failed', e); }\n }\n\n if(booking.idBase64){\n try{\n doc.setFontSize(9);\n doc.text('ID Proof', imgX + imgW + 10, imgY - 6);\n if(booking.idIsPDF){\n \/\/ cannot embed PDF as image \u2014 mention instead\n doc.text('ID uploaded as PDF (attached on server).', imgX + imgW + 10, imgY + 20);\n } else {\n doc.addImage(booking.idBase64, imgX + imgW + 10, imgY, imgW, imgH);\n }\n }catch(e){ console.warn('id add failed', e); }\n }\n\n \/\/ Footer Notes: Pencil icon + instructions\n const footY = Math.max(tableBottom + imgH + 50, imgY + imgH + 30);\n doc.setFontSize(11);\n doc.setTextColor(80,80,80);\n \/\/ pencil-like icon (text emoji) and note\n doc.text('\u270f\ufe0f NOTE: Download this PDF, then share it on WhatsApp to confirm booking.', margin, footY);\n doc.text('Steps: 1) Download PDF 2) Share on WhatsApp 3) Our team will verify and confirm hour-wise schedule.', margin, footY + 16);\n\n \/\/ Save with friendly filename\n const safeName = booking.name.replace(\/\\s+\/g,'_').replace(\/[^\\w_-]\/g,'');\n const fileName = `${MERCHANT.replace(\/\\s+\/g,'_')}_Booking_${safeName}_${new Date().toISOString().slice(0,10)}.pdf`;\n doc.save(fileName);\n});\n<\/script>\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Happy Camel Safari \u2014 Full Booking System Happy Camel Safari \u2014 Booking & Receipt System Customer Details Full Name Email Mobile Upload Face Photo (JPG\/PNG) Upload ID Proof (JPG\/PNG\/PDF) Booking Details Tour Type Camel SafariJeep SafariFort TourSport Goa Package Package \/ Rate 1 Hour Safari \u2014 \u20b91,000 \/ hourHalf Day \u2014 \u20b92,500Full Day \u2014 \u20b94,500Sport […]<\/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-88","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=88"}],"version-history":[{"count":15,"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages\/88\/revisions"}],"predecessor-version":[{"id":103,"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages\/88\/revisions\/103"}],"wp:attachment":[{"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

<\/div>\n\n\n\n

$\"Close$ <\/span>

<\/div>\n<\/div><\/div>\n\n\n\n\n\n\n\n\nHappy Camel Safari \u2014 Full Booking System<\/title>\n\n\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\n<style>\n :root{\n --bg:#fffaf0; --card:#ffffff; --accent:#8B4513; --muted:#6b5b4a; --gold:#c99a52;\n }\n body{font-family:Arial,Helvetica,sans-serif;background:var(--bg);margin:0;padding:22px;color:#222}\n .wrap{max-width:1150px;margin:0 auto}\n h1{text-align:center;color:var(--accent);margin-bottom:10px}\n .grid{display:grid;grid-template-columns:1fr 420px;gap:18px}\n .card{background:var(--card);border-radius:12px;padding:16px;box-shadow:0 6px 18px rgba(0,0,0,0.06);border:1px solid #eee}\n label{display:block;font-weight:700;margin-top:10px;color:var(--muted)}\n input[type=\"text\"], input[type=\"email\"], input[type=\"tel\"], input[type=\"date\"], input[type=\"number\"], select, textarea{\n width:100%;padding:10px;margin-top:6px;border-radius:8px;border:1px solid #d6cdbf;font-size:14px;\n }\n .preview{max-width:160px;border-radius:8px;border:1px solid #ddd;display:block;margin-top:8px}\n .small{font-size:13px;color:#666;margin-top:6px}\n .total{font-size:18px;font-weight:800;color:#b22222;text-align:center;margin:12px 0}\n .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}\n button{background:var(--accent);color:#fff;border:0;padding:12px 14px;border-radius:8px;cursor:pointer;font-weight:700}\n button.ghost{background:#eee;color:#333}\n .qrcode-wrap{background:#fff;padding:12px;border-radius:8px;border:1px dashed #e6d8c2;text-align:center}\n .note{margin-top:12px;padding:10px;border-radius:8px;background:#fff9ec;border:1px solid #f0e2c8;color:#5f4b2b}\n .footer-note{font-size:13px;color:#444;margin-top:12px}\n @media(max-width:1040px){ .grid{grid-template-columns:1fr} .preview{max-width:120px} }\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\">\n <h1>Happy Camel Safari \u2014 Booking & Receipt System<\/h1>\n\n <div class=\"grid\">\n \n <div class=\"card\">\n <h3>Customer Details<\/h3>\n <label>Full Name<\/label>\n <input id=\"name\" type=\"text\" placeholder=\"Guest name\">\n\n <label>Email<\/label>\n <input id=\"email\" type=\"email\" placeholder=\"guest@example.com\">\n\n <label>Mobile<\/label>\n <input id=\"mobile\" type=\"tel\" placeholder=\"+91XXXXXXXXXX\">\n\n <label>Upload Face Photo (JPG\/PNG)<\/label>\n <input id=\"photo\" type=\"file\" accept=\"image\/*\">\n\n <img id=\"photoPreview\" class=\"preview\" style=\"display:none\" alt=\"photo preview\">\n\n <label>Upload ID Proof (JPG\/PNG\/PDF)<\/label>\n <input id=\"idproof\" type=\"file\" accept=\"image\/*,application\/pdf\">\n\n <img id=\"idPreview\" class=\"preview\" style=\"display:none\" alt=\"id preview\">\n <div id=\"pdfNote\" class=\"small\" style=\"display:none;color:#5f4b2b\"><\/div>\n\n <hr style=\"margin:16px 0;border:none;border-top:1px solid #eee\">\n\n <h3>Booking Details<\/h3>\n <label>Tour Type<\/label>\n <select id=\"tourType\">\n <option value=\"Camel Safari\">Camel Safari<\/option>\n <option value=\"Jeep Safari\">Jeep Safari<\/option>\n <option value=\"Fort Tour\">Fort Tour<\/option>\n <option value=\"Sport Goa Package\">Sport Goa Package<\/option>\n <\/select>\n\n <label>Package \/ Rate<\/label>\n <select id=\"packageRate\" onchange=\"updateAll()\">\n \n <option value=\"1000\" data-mode=\"hour\">1 Hour Safari \u2014 \u20b91,000 \/ hour<\/option>\n <option value=\"2500\" data-mode=\"halfday\">Half Day \u2014 \u20b92,500<\/option>\n <option value=\"4500\" data-mode=\"fullday\">Full Day \u2014 \u20b94,500<\/option>\n <option value=\"8000\" data-mode=\"package\">Sport Goa 3 Days \u2014 \u20b98,000 \/ person<\/option>\n <\/select>\n\n <label>Category<\/label>\n <select id=\"category\" onchange=\"updateAll()\">\n <option value=\"1\">Standard (x1)<\/option>\n <option value=\"1.25\">First Class (x1.25)<\/option>\n <option value=\"1.6\">High Class (x1.6)<\/option>\n <\/select>\n\n <div style=\"display:flex;gap:10px;margin-top:12px;\">\n <div style=\"flex:1\">\n <label>Hours<\/label>\n <select id=\"hours\" onchange=\"updateAll()\">\n <option value=\"1\">1<\/option><option value=\"2\">2<\/option><option value=\"3\">3<\/option>\n <option value=\"4\">4<\/option><option value=\"5\">5<\/option><option value=\"8\">8<\/option>\n <\/select>\n <\/div>\n <div style=\"width:120px\">\n <label>Minutes<\/label>\n <select id=\"minutes\" onchange=\"updateAll()\">\n <option value=\"0\">0<\/option><option value=\"15\">15<\/option><option value=\"30\">30<\/option><option value=\"45\">45<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <label style=\"margin-top:12px\">Number of People<\/label>\n <input id=\"people\" type=\"number\" min=\"1\" value=\"1\" onchange=\"updateAll()\">\n\n <div class=\"total\" id=\"total\">Total: \u20b9 1000<\/div>\n\n <div class=\"note\">\n <strong>UPI \/ Paytm \/ GooglePay<\/strong><br>\n Pay using the QR on the right. After payment, enter your Transaction ID and click <em>Confirm Booking<\/em>.\n <\/div>\n\n <\/div>\n\n \n <div>\n <div class=\"card\">\n <h3 style=\"margin-top:0\">Payment & QR<\/h3>\n <div class=\"qrcode-wrap\">\n <div id=\"qrClickWrap\" style=\"display:inline-block;cursor:pointer\"><\/div>\n <div class=\"small\" style=\"margin-top:8px\">Tap \/ Scan to open UPI app. Amount auto-filled.<\/div>\n <div style=\"margin-top:8px\" class=\"small\">UPI ID: <b id=\"upiSpan\">happycamelsafari@upi<\/b><\/div>\n <\/div>\n\n <label style=\"margin-top:12px\">Enter Transaction ID<\/label>\n <input id=\"txn\" type=\"text\" placeholder=\"e.g. TXN1234567890\">\n\n <div class=\"actions\">\n <button id=\"confirmBtn\">\u2705 Confirm Booking<\/button>\n <button id=\"resetBtn\" class=\"ghost\">Reset<\/button>\n <\/div>\n\n <div id=\"afterArea\" style=\"display:none;margin-top:12px\">\n <div class=\"small\" style=\"margin-bottom:8px\">Booking confirmed. Download receipt or share:<\/div>\n <div class=\"actions\">\n <button id=\"downloadPdfBtn\" style=\"background:#2E7D32\">\ud83d\udce5 Download PDF<\/button>\n <a id=\"whatsappBtn\" target=\"_blank\" style=\"text-decoration:none\"><button style=\"background:#25D366\">\ud83d\udcf2 Share on WhatsApp<\/button><\/a>\n <\/div>\n\n <div class=\"footer-note\">\n <strong>Note:<\/strong> After downloading the PDF, please share it on WhatsApp to speed up confirmation.\n <\/div>\n <\/div>\n\n <\/div>\n\n <div class=\"card\" style=\"margin-top:14px\">\n <h3 style=\"margin-top:0\">Quick Preview<\/h3>\n <div><b>Face Photo:<\/b><\/div>\n <img id=\"faceSmall\" class=\"preview\" style=\"display:none\">\n <div style=\"margin-top:8px\"><b>ID Preview:<\/b><\/div>\n <img id=\"idSmall\" class=\"preview\" style=\"display:none\">\n <div id=\"idPdfNote\" class=\"small\" style=\"display:none;color:#6b5b4a\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n\/* -------- CONFIG -------- *\/\nconst MERCHANT = \"Happy Camel Safari\";\nconst UPI_VPA = \"happycamelsafari@upi\"; \/\/ change to your VPA\n\/* -------- END CONFIG ---- *\/\n\nlet photoBase64 = \"\";\nlet idBase64 = \"\";\nlet idIsPDF = false;\nlet booking = null;\n\n\/\/ DOM refs\nconst packageRateEl = document.getElementById('packageRate');\nconst categoryEl = document.getElementById('category');\nconst hoursEl = document.getElementById('hours');\nconst minutesEl = document.getElementById('minutes');\nconst peopleEl = document.getElementById('people');\nconst totalEl = document.getElementById('total');\nconst qrWrap = document.getElementById('qrClickWrap');\nconst upiSpan = document.getElementById('upiSpan');\n\n\/\/ read files and preview\ndocument.getElementById('photo').addEventListener('change', function(e){\n const f = e.target.files && e.target.files[0];\n if(!f) return;\n const r = new FileReader();\n r.onload = function(){ photoBase64 = r.result; document.getElementById('photoPreview').src = photoBase64; document.getElementById('photoPreview').style.display='block'; document.getElementById('faceSmall').src=photoBase64; document.getElementById('faceSmall').style.display='block'; }\n r.readAsDataURL(f);\n});\ndocument.getElementById('idproof').addEventListener('change', function(e){\n const f = e.target.files && e.target.files[0];\n if(!f) return;\n const r = new FileReader();\n r.onload = function(){\n idBase64 = r.result;\n const idImg = document.getElementById('idPreview');\n const idSmall = document.getElementById('idSmall');\n if(f.type === 'application\/pdf'){\n idIsPDF = true;\n idImg.style.display='none';\n idSmall.style.display='none';\n document.getElementById('pdfNote').innerText = \"ID uploaded as PDF (will be referenced in receipt).\";\n document.getElementById('pdfNote').style.display='block';\n document.getElementById('idPdfNote').innerText = \"ID uploaded as PDF.\";\n document.getElementById('idPdfNote').style.display = 'block';\n } else {\n idIsPDF = false;\n idImg.src = idBase64; idImg.style.display='block';\n idSmall.src = idBase64; idSmall.style.display='block';\n const pdfNote = document.getElementById('pdfNote'); if(pdfNote) pdfNote.style.display='none';\n const idPdfNote = document.getElementById('idPdfNote'); if(idPdfNote) idPdfNote.style.display='none';\n }\n };\n r.readAsDataURL(f);\n});\n\n\/\/ update total & QR\nfunction updateAll(){\n const base = parseFloat(packageRateEl.value || 0);\n const mode = packageRateEl.options[packageRateEl.selectedIndex].dataset.mode || 'hour';\n const catMul = parseFloat(categoryEl.value || 1);\n const hours = parseInt(hoursEl.value || 0);\n const minutes = parseInt(minutesEl.value || 0);\n const people = parseInt(peopleEl.value || 1);\n\n \/\/ compute total \u2014 if package is per person (package types), treat accordingly, else hours * rate\n let total = 0;\n if(mode === 'package' || mode === 'halfday' || mode === 'fullday'){\n \/\/ treat base as per person package price\n total = base * people * catMul;\n } else {\n \/\/ hourly type\n let hoursDecimal = hours + (minutes\/60);\n if(hoursDecimal <= 0) hoursDecimal = 1;\n total = Math.round(base * hoursDecimal * people * catMul);\n }\n\n totalEl.innerText = \"Total: \u20b9 \" + total;\n\n \/\/ Build UPI deep link\n const selText = packageRateEl.options[packageRateEl.selectedIndex].text;\n const upiLink = `upi:\/\/pay?pa=${encodeURIComponent(UPI_VPA)}&pn=${encodeURIComponent(MERCHANT)}&am=${encodeURIComponent(total)}&cu=INR&tn=${encodeURIComponent('Booking '+selText)}`;\n\n \/\/ QR using qrserver (image)\n qrWrap.innerHTML = '';\n const img = document.createElement('img');\n img.src = 'https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=260x260&data=' + encodeURIComponent(upiLink);\n img.alt = 'UPI QR';\n img.style.border = '6px solid #fff';\n img.style.borderRadius = '12px';\n img.style.boxShadow = '0 6px 18px rgba(0,0,0,0.08)';\n img.style.cursor = 'pointer';\n img.onclick = function(){ window.location.href = upiLink; };\n qrWrap.appendChild(img);\n\n upiSpan.innerText = UPI_VPA;\n}\npackageRateEl.addEventListener('change', updateAll);\ncategoryEl.addEventListener('change', updateAll);\nhoursEl.addEventListener('change', updateAll);\nminutesEl.addEventListener('change', updateAll);\npeopleEl.addEventListener('input', updateAll);\nupdateAll();\n\n\/\/ reset\ndocument.getElementById('resetBtn').addEventListener('click', function(){\n if(!confirm('Reset form?')) return;\n document.getElementById('name').value=''; document.getElementById('email').value=''; document.getElementById('mobile').value='';\n document.getElementById('photo').value=''; document.getElementById('idproof').value='';\n photoBase64 = ''; idBase64 = ''; idIsPDF = false;\n document.getElementById('photoPreview').style.display='none'; document.getElementById('idPreview').style.display='none';\n document.getElementById('faceSmall').style.display='none'; document.getElementById('idSmall').style.display='none';\n document.getElementById('pdfNote').style.display='none'; document.getElementById('idPdfNote').style.display='none';\n document.getElementById('txn').value='';\n document.getElementById('afterArea').style.display='none';\n booking = null;\n updateAll();\n});\n\n\/\/ confirm booking (validate, snapshot, enable PDF & WA)\ndocument.getElementById('confirmBtn').addEventListener('click', function(){\n const name = (document.getElementById('name').value || '').trim();\n const mobile = (document.getElementById('mobile').value || '').trim();\n const date = (document.getElementById('date').value || (new Date()).toISOString().slice(0,10));\n const txn = (document.getElementById('txn').value || '').trim();\n\n if(!name){ alert('Please enter name'); return; }\n if(!mobile){ alert('Please enter mobile'); return; }\n if(!txn){ alert('Please enter transaction ID (after payment)'); return; }\n\n \/\/ snapshot\n const sel = packageRateEl;\n const packageText = sel.options[sel.selectedIndex].text;\n const pricePer = parseFloat(sel.value);\n const people = parseInt(peopleEl.value || 1);\n\n \/\/ compute total again\n const totalText = totalEl.innerText.replace('Total: \u20b9','').trim();\n const total = isNaN(Number(totalText)) ? 0 : Number(totalText);\n\n booking = {\n name, email: document.getElementById('email').value || '',\n mobile, date, packageText, pricePer, people, total,\n notes: document.getElementById('notes') ? document.getElementById('notes').value : '',\n txn, photoBase64, idBase64, idIsPDF\n };\n\n \/\/ show after area\n document.getElementById('afterArea').style.display='block';\n\n \/\/ prepare whatsapp message\n const waMsg = `Happy Camel Safari Booking\\nName: ${booking.name}\\nMobile: ${booking.mobile}\\nDate: ${booking.date}\\nPackage: ${booking.packageText}\\nTravellers: ${booking.people}\\nTotal: \u20b9${booking.total}\\nTxnID: ${booking.txn}`;\n document.getElementById('whatsappBtn').href = 'https:\/\/wa.me\/?text=' + encodeURIComponent(waMsg);\n});\n\n\/\/ PDF generation\ndocument.getElementById('downloadPdfBtn').addEventListener('click', function(){\n if(!booking){ alert('Please confirm booking first'); return; }\n const { jsPDF } = window.jspdf;\n const doc = new jsPDF({unit:'pt', format:'a4'});\n const pageW = doc.internal.pageSize.getWidth();\n const margin = 36;\n\n \/\/ Watermark\n doc.setFontSize(60);\n doc.setTextColor(240,240,240);\n doc.text(MERCHANT, pageW\/2, 420, {align:'center', angle:45});\n doc.setTextColor(0,0,0);\n\n \/\/ Header rectangle with border (professional)\n doc.setDrawColor(139,69,19);\n doc.setFillColor(139,69,19); \/\/ brown fill\n doc.rect(margin, 24, pageW - margin*2, 34, 'F'); \/\/ filled bar\n doc.setFontSize(16);\n doc.setTextColor(255,255,255);\n doc.text(`${MERCHANT} \u2014 Booking Receipt`, pageW\/2, 48, {align:'center'});\n\n \/\/ Sub header\n doc.setFontSize(10);\n doc.setTextColor(120,120,120);\n doc.text('Booking Confirmation \u2014 Keep this receipt for reference', margin, 66);\n\n \/\/ Decorative short line (under header)\n doc.setDrawColor(200,170,120);\n doc.setLineWidth(1);\n doc.line(margin, 72, pageW - margin - 200, 72);\n\n \/\/ Prepare table data\n const tableData = [\n ['Guest Name', booking.name],\n ['Email', booking.email || '\u2014'],\n ['Mobile', booking.mobile],\n ['Booking Date', booking.date],\n ['Package', booking.packageText],\n ['Price \/ Unit', '\u20b9 ' + booking.pricePer],\n ['No. of Travellers', booking.people.toString()],\n ['Total Amount', '\u20b9 ' + booking.total],\n ['Transaction ID', booking.txn],\n ['Notes', booking.notes || '\u2014'],\n ['Guide ID', 'G-2025-001'],\n ['Hotel ID', 'H-2025-001']\n ];\n\n doc.autoTable({\n startY: 88,\n head: [['Field','Details']],\n body: tableData,\n theme: 'grid',\n headStyles: {fillColor: [139,69,19], textColor:255, fontStyle:'bold'},\n styles: {fontSize:11, cellPadding:6},\n columnStyles: {0: {fontStyle: 'bold', cellWidth: 120}}\n });\n\n \/\/ place photos side-by-side right of table\n const tableBottom = doc.lastAutoTable ? doc.lastAutoTable.finalY : 200;\n const imgX = pageW - margin - 240;\n let imgY = tableBottom + 14;\n const imgW = 105;\n const imgH = 105;\n\n if(booking.photoBase64){\n try{\n doc.setFontSize(9);\n doc.text('Customer Photo', imgX, imgY - 6);\n doc.addImage(booking.photoBase64, imgX, imgY, imgW, imgH);\n }catch(e){ console.warn('photo add failed', e); }\n }\n\n if(booking.idBase64){\n try{\n doc.setFontSize(9);\n doc.text('ID Proof', imgX + imgW + 10, imgY - 6);\n if(booking.idIsPDF){\n \/\/ cannot embed PDF as image \u2014 mention instead\n doc.text('ID uploaded as PDF (attached on server).', imgX + imgW + 10, imgY + 20);\n } else {\n doc.addImage(booking.idBase64, imgX + imgW + 10, imgY, imgW, imgH);\n }\n }catch(e){ console.warn('id add failed', e); }\n }\n\n \/\/ Footer Notes: Pencil icon + instructions\n const footY = Math.max(tableBottom + imgH + 50, imgY + imgH + 30);\n doc.setFontSize(11);\n doc.setTextColor(80,80,80);\n \/\/ pencil-like icon (text emoji) and note\n doc.text('\u270f\ufe0f NOTE: Download this PDF, then share it on WhatsApp to confirm booking.', margin, footY);\n doc.text('Steps: 1) Download PDF 2) Share on WhatsApp 3) Our team will verify and confirm hour-wise schedule.', margin, footY + 16);\n\n \/\/ Save with friendly filename\n const safeName = booking.name.replace(\/\\s+\/g,'_').replace(\/[^\\w_-]\/g,'');\n const fileName = `${MERCHANT.replace(\/\\s+\/g,'_')}_Booking_${safeName}_${new Date().toISOString().slice(0,10)}.pdf`;\n doc.save(fileName);\n});\n<\/script>\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Happy Camel Safari \u2014 Full Booking System Happy Camel Safari \u2014 Booking & Receipt System Customer Details Full Name Email Mobile Upload Face Photo (JPG\/PNG) Upload ID Proof (JPG\/PNG\/PDF) Booking Details Tour Type Camel SafariJeep SafariFort TourSport Goa Package Package \/ Rate 1 Hour Safari \u2014 \u20b91,000 \/ hourHalf Day \u2014 \u20b92,500Full Day \u2014 \u20b94,500Sport […]<\/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-88","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=88"}],"version-history":[{"count":15,"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages\/88\/revisions"}],"predecessor-version":[{"id":103,"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages\/88\/revisions\/103"}],"wp:attachment":[{"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}