{"id":76,"date":"2025-08-20T18:52:52","date_gmt":"2025-08-20T18:52:52","guid":{"rendered":"https:\/\/happycamelsafari.sabpro.in\/?page_id=76"},"modified":"2025-08-20T19:37:04","modified_gmt":"2025-08-20T19:37:04","slug":"76-2","status":"publish","type":"page","link":"https:\/\/happycamelsafari.sabpro.in\/?page_id=76","title":{"rendered":"Safari"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull is-layout-flow wp-container-core-group-is-layout-ec95c4a5 wp-block-group-is-layout-flow\" style=\"margin-top:0;margin-bottom:0\">\n<div class=\"wp-block-columns alignfull is-style-section-2 is-layout-flex wp-container-core-columns-is-layout-b2548622 wp-block-columns-is-layout-flex\" style=\"padding-top:0;padding-bottom:0\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Happy Camel Safari &#8211; Hourly Booking<\/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:#fffaf0; padding:20px; }\nh2 { text-align:center; color:#8B4513; }\n.section { border:2px solid #ccc; border-radius:12px; padding:15px; margin-bottom:20px; background:#ffffff; }\nlabel { font-weight:bold; margin-top:10px; display:block; }\ninput, select { width:100%; padding:8px; border-radius:8px; margin-top:5px; border:1px solid #ccc; }\nbutton {\n  background:#8B4513; color:white; padding:12px; border:none; border-radius:8px; font-size:16px; cursor:pointer;\n}\nbutton:hover { background:#A0522D; }\n.total { text-align:center; font-size:20px; color:#B22222; font-weight:bold; margin:10px; }\nimg.preview { max-width:120px; margin-top:10px; border:2px solid #ccc; border-radius:8px; }\n.success { display:none; text-align:center; margin-top:20px; }\n<\/style>\n<\/head>\n<body>\n\n<h2>\ud83d\udc2a Happy Camel Safari &#8211; Hourly Booking \ud83d\udc2a<\/h2>\n\n<div class=\"section\">\n  <h3>1. Customer Info<\/h3>\n  <label>Name<\/label><input type=\"text\" id=\"name\">\n  <label>Email<\/label><input type=\"email\" id=\"email\">\n  <label>Mobile<\/label><input type=\"tel\" id=\"mobile\">\n\n  <label>Upload Photo<\/label>\n  <input type=\"file\" id=\"photo\" accept=\"image\/*\" onchange=\"previewImage(event)\">\n  <img id=\"photoPreview\" class=\"preview\" style=\"display:none;\">\n\n  <label>Upload ID Proof<\/label>\n  <input type=\"file\" id=\"idproof\" accept=\"image\/*\" onchange=\"previewID(event)\">\n  <img id=\"idPreview\" class=\"preview\" style=\"display:none;\">\n<\/div>\n\n<div class=\"section\">\n  <h3>2. Safari Details<\/h3>\n  <label>Safari Type<\/label>\n  <select id=\"safariType\" onchange=\"updateTotal()\">\n    <option value=\"1000\">First Class &#8211; \u20b91000\/hour<\/option>\n    <option value=\"700\">High Class &#8211; \u20b9700\/hour<\/option>\n    <option value=\"400\">Normal &#8211; \u20b9400\/hour<\/option>\n  <\/select>\n\n  <label>Safari Category<\/label>\n  <select id=\"safariCategory\">\n    <option>Camel Safari<\/option>\n    <option>Jeep Safari<\/option>\n    <option>Cultural Safari<\/option>\n  <\/select>\n<\/div>\n\n<div class=\"section\">\n  <h3>3. Booking Time<\/h3>\n  <label>Date<\/label><input type=\"date\" id=\"date\">\n  <label>Hours<\/label>\n  <select id=\"hours\" onchange=\"updateTotal()\">\n    <option value=\"1\">1 Hour<\/option>\n    <option value=\"2\">2 Hours<\/option>\n    <option value=\"3\">3 Hours<\/option>\n    <option value=\"4\">4 Hours<\/option>\n  <\/select>\n  <label>Minutes<\/label>\n  <select id=\"minutes\">\n    <option value=\"0\">0<\/option>\n    <option value=\"30\">30 Minutes<\/option>\n  <\/select>\n<\/div>\n\n<div class=\"section\">\n  <h3>4. Payment<\/h3>\n  <div class=\"total\" id=\"total\">Total: \u20b91000<\/div>\n  <p style=\"text-align:center;\"><b>UPI ID:<\/b> happycamel@upi<\/p>\n  <div style=\"text-align:center;\">\n    <img decoding=\"async\" id=\"qrcode\" src=\"https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=150x150&#038;data=upi:\/\/pay?pa=happycamel@upi&#038;pn=HappyCamelSafari&#038;am=1000\">\n  <\/div>\n  <label>Transaction ID<\/label><input type=\"text\" id=\"txn\">\n<\/div>\n\n<div class=\"section\">\n  <button onclick=\"confirmBooking()\">\u2705 Confirm Booking<\/button>\n  <div class=\"success\" id=\"successBox\">\n    <h3>\ud83c\udf89 Booking Confirmed<\/h3>\n    <button onclick=\"downloadPDF()\">\ud83d\udce5 Download PDF<\/button><br><br>\n    <a id=\"whatsappShare\" target=\"_blank\"><button style=\"background:green;\">\ud83d\udcf2 Share on WhatsApp<\/button><\/a>\n  <\/div>\n<\/div>\n\n<script>\nlet photoBase64 = \"\";\nlet idBase64 = \"\";\n\nfunction previewImage(event) {\n  let reader = new FileReader();\n  reader.onload = function(){\n    photoBase64 = reader.result;\n    let img = document.getElementById(\"photoPreview\");\n    img.src = reader.result;\n    img.style.display = \"block\";\n  }\n  reader.readAsDataURL(event.target.files[0]);\n}\n\nfunction previewID(event) {\n  let reader = new FileReader();\n  reader.onload = function(){\n    idBase64 = reader.result;\n    let img = document.getElementById(\"idPreview\");\n    img.src = reader.result;\n    img.style.display = \"block\";\n  }\n  reader.readAsDataURL(event.target.files[0]);\n}\n\nfunction updateTotal() {\n  let rate = parseInt(document.getElementById(\"safariType\").value);\n  let hours = parseInt(document.getElementById(\"hours\").value);\n  let total = rate * hours;\n  document.getElementById(\"total\").innerText = \"Total: \u20b9\" + total;\n  document.getElementById(\"qrcode\").src =\n    \"https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=150x150&data=upi:\/\/pay?pa=happycamel@upi&pn=HappyCamelSafari&am=\" + total;\n}\n\nfunction confirmBooking() {\n  let txn = document.getElementById(\"txn\").value;\n  if(txn === \"\") { alert(\"\u26a0\ufe0f Please enter Transaction ID\"); return; }\n  document.getElementById(\"successBox\").style.display = \"block\";\n\n  let name = document.getElementById(\"name\").value;\n  let date = document.getElementById(\"date\").value;\n  let total = document.getElementById(\"total\").innerText;\n\n  let msg = `Happy Camel Safari Booking \u2705\\nName: ${name}\\nDate: ${date}\\n${total}\\nTxn ID: ${txn}`;\n  document.getElementById(\"whatsappShare\").href = \"https:\/\/wa.me\/919999999999?text=\" + encodeURIComponent(msg);\n}\n\nfunction downloadPDF() {\n  const { jsPDF } = window.jspdf;\n  const doc = new jsPDF();\n  const pageWidth = doc.internal.pageSize.getWidth();\n  const pageHeight = doc.internal.pageSize.getHeight();\n  const tableMargin = 20;\n\n  \/\/ Watermark (background)\n  doc.setFontSize(50);\n  doc.setTextColor(230, 230, 230);\n  doc.text(\"Happy Camel Safari\", pageWidth \/ 2, pageHeight \/ 2, { align: \"center\", angle: 45 });\n  doc.setTextColor(0, 0, 0); \/\/ Reset color for other text\n\n  \/\/ Header with Logo\n  doc.setFontSize(22);\n  doc.setTextColor(139, 69, 19);\n  doc.text(\"Happy Camel Safari\", tableMargin, 20);\n  doc.setFontSize(10);\n  doc.setTextColor(150, 150, 150);\n  doc.text(\"Booking Confirmation Receipt\", tableMargin, 28);\n  \n  \/\/ Adding a line separator\n  doc.setDrawColor(139, 69, 19);\n  doc.line(tableMargin, 32, pageWidth - tableMargin, 32);\n\n  \/\/ Get form data\n  let name = document.getElementById(\"name\").value;\n  let email = document.getElementById(\"email\").value;\n  let mobile = document.getElementById(\"mobile\").value;\n  let date = document.getElementById(\"date\").value;\n  let safariType = document.getElementById(\"safariType\").options[document.getElementById(\"safariType\").selectedIndex].text;\n  let safariCategory = document.getElementById(\"safariCategory\").value;\n  let hours = document.getElementById(\"hours\").value;\n  let total = document.getElementById(\"total\").innerText;\n  let txn = document.getElementById(\"txn\").value;\n\n  \/\/ Set up the table data for autoTable\n  const tableData = [\n    ['Name', name],\n    ['Email', email],\n    ['Mobile', mobile],\n    ['Date', date],\n    ['Safari Type', safariType],\n    ['Safari Category', safariCategory],\n    ['Hours', hours],\n    ['Total', total],\n    ['Transaction ID', txn],\n    ['Guide ID', 'G-2025-001'],\n    ['Hotel ID', 'H-2025-001']\n  ];\n\n  \/\/ AutoTable for details\n  doc.autoTable({\n    startY: 40,\n    head: [['Field', 'Details']],\n    body: tableData,\n    theme: 'striped',\n    styles: {\n      fontSize: 10,\n      cellPadding: 3,\n      valign: 'middle',\n      lineColor: [200, 200, 200],\n      lineWidth: 0.1\n    },\n    headStyles: {\n      fillColor: [139, 69, 19],\n      textColor: [255, 255, 255],\n      fontStyle: 'bold'\n    },\n    columnStyles: {\n      0: { fontStyle: 'bold' }\n    }\n  });\n\n  \/\/ Position for images (ID Card style)\n  const imageSize = 30; \/\/ Small size for professional look\n  const photoX = pageWidth - tableMargin - 50;\n  const photoY = 40;\n  \n  const idX = pageWidth - tableMargin - 50;\n  const idY = photoY + imageSize + 10;\n  \n  \/\/ Customer Photo\n  if (photoBase64) {\n    doc.text(\"Customer Photo\", photoX, photoY - 5);\n    doc.addImage(photoBase64, \"JPEG\", photoX, photoY, imageSize, imageSize);\n  }\n\n  \/\/ ID Proof\n  if (idBase64) {\n    doc.text(\"ID Proof\", idX, idY - 5);\n    doc.addImage(idBase64, \"JPEG\", idX, idY, imageSize, imageSize);\n  }\n\n  \/\/ Footer\n  const finalY = doc.lastAutoTable.finalY + 20;\n  doc.setFontSize(10);\n  doc.setTextColor(100, 100, 100);\n  doc.text(\"Thank you for choosing Happy Camel Safari!\", tableMargin, finalY);\n  doc.text(\"Note: This is an auto-generated receipt. Please show this at the counter.\", tableMargin, finalY + 5);\n\n  doc.save(\"HappyCamelSafari_Booking.pdf\");\n}\n<\/script>\n<\/body>\n<\/html>\n\n\n\n\n<div class=\"wp-block-cover is-light\"><img decoding=\"async\" class=\"wp-block-cover__image-background\" alt=\"Close up photo of white flowers on a grey background\" src=\"https:\/\/happycamelsafari.sabpro.in\/wp-content\/themes\/twentytwentyfive\/assets\/images\/botany-flowers-closeup.webp\" data-object-fit=\"cover\"\/><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-0 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Happy Camel Safari &#8211; Hourly Booking \ud83d\udc2a Happy Camel Safari &#8211; Hourly Booking \ud83d\udc2a 1. Customer Info Name Email Mobile Upload Photo Upload ID Proof 2. Safari Details Safari Type First Class &#8211; \u20b91000\/hourHigh Class &#8211; \u20b9700\/hourNormal &#8211; \u20b9400\/hour Safari Category Camel SafariJeep SafariCultural Safari 3. Booking Time Date Hours 1 Hour2 Hours3 Hours4 Hours [&hellip;]<\/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-76","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages\/76","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=76"}],"version-history":[{"count":9,"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages\/76\/revisions"}],"predecessor-version":[{"id":86,"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages\/76\/revisions\/86"}],"wp:attachment":[{"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}