{"id":221,"date":"2025-08-22T07:08:01","date_gmt":"2025-08-22T07:08:01","guid":{"rendered":"https:\/\/happycamelsafari.sabpro.in\/?page_id=221"},"modified":"2025-08-22T09:01:27","modified_gmt":"2025-08-22T09:01:27","slug":"221-2","status":"publish","type":"page","link":"https:\/\/happycamelsafari.sabpro.in\/?page_id=221","title":{"rendered":"Hotel Jasalmer"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Happy Camel Safari &#8211; Booking Form<\/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.28\/jspdf.plugin.autotable.min.js\"><\/script>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrcodejs\/1.0.0\/qrcode.min.js\"><\/script>\n  <style>\n    body { font-family: Arial, sans-serif; padding: 20px; background: #fffaf0; }\n    h2 { color: #b8860b; }\n    .form-group { margin-bottom: 10px; }\n    label { display: block; margin-bottom: 5px; font-weight: bold; }\n    input, select { width: 100%; padding: 8px; }\n    button { padding: 10px 15px; margin-top: 10px; cursor: pointer; background:#b8860b; color:#fff; border:none; border-radius:5px; }\n    #qrcode { margin-top: 10px; }\n    #afterPayment { display: none; margin-top: 20px; text-align: center; }\n    #afterPayment button { margin: 10px; }\n    .image-preview { margin-top: 10px; display: flex; gap: 20px; flex-wrap: wrap; }\n    .image-preview img { max-width: 150px; border: 1px solid #ddd; padding: 5px; border-radius: 5px; }\n  <\/style>\n<\/head>\n<body>\n\n  <h2>\ud83d\udc2a Happy Camel Safari &#8211; Booking Form<\/h2>\n  <form id=\"bookingForm\">\n    <div class=\"form-group\">\n      <label>Check In<\/label>\n      <input type=\"date\" id=\"checkin\" required>\n    <\/div>\n\n    <div class=\"form-group\">\n      <label>Check Out<\/label>\n      <input type=\"date\" id=\"checkout\" required>\n    <\/div>\n\n    <div class=\"form-group\">\n      <label>Rooms<\/label>\n      <select id=\"rooms\" onchange=\"calculateBudget()\">\n        <option value=\"1\">1 Room<\/option>\n        <option value=\"2\">2 Rooms<\/option>\n        <option value=\"3\">3 Rooms<\/option>\n        <option value=\"4\">4 Rooms<\/option>\n        <option value=\"5\">5 Rooms<\/option>\n      <\/select>\n    <\/div>\n\n    <div class=\"form-group\">\n      <label>Hotel Category<\/label>\n      <select id=\"hotel\" onchange=\"calculateBudget()\">\n        <option value=\"1 Star\">1 Star<\/option>\n        <option value=\"2 Star\">2 Star<\/option>\n        <option value=\"3 Star\">3 Star<\/option>\n        <option value=\"4 Star\">4 Star<\/option>\n        <option value=\"5 Star\">5 Star<\/option>\n        <option value=\"6 Star\">6 Star<\/option>\n        <option value=\"7 Star\">7 Star<\/option>\n      <\/select>\n    <\/div>\n\n    <div class=\"form-group\">\n      <label>Children<\/label>\n      <select id=\"children\" onchange=\"calculateBudget()\">\n        <option value=\"0\">0<\/option>\n        <option value=\"1\">1<\/option>\n        <option value=\"2\">2<\/option>\n        <option value=\"3\">3<\/option>\n        <option value=\"4\">4<\/option>\n      <\/select>\n    <\/div>\n\n    <div class=\"form-group\">\n      <label>Name<\/label>\n      <input type=\"text\" id=\"name\" required>\n    <\/div>\n\n    <div class=\"form-group\">\n      <label>Mobile<\/label>\n      <input type=\"tel\" id=\"mobile\" required>\n    <\/div>\n\n    <div class=\"form-group\">\n      <label>Email<\/label>\n      <input type=\"email\" id=\"email\" required>\n    <\/div>\n\n    <div class=\"form-group\">\n      <label>Upload Selfie Photo<\/label>\n      <input type=\"file\" id=\"selfie\" accept=\"image\/*\" required>\n    <\/div>\n    <div id=\"selfie-preview\" class=\"image-preview\"><\/div>\n\n    <div class=\"form-group\">\n      <label>Upload ID Proof Photo<\/label>\n      <input type=\"file\" id=\"idProof\" accept=\"image\/*\" required>\n    <\/div>\n    <div id=\"idProof-preview\" class=\"image-preview\"><\/div>\n\n    <div class=\"form-group\">\n      <label>Auto Budget (\u20b9)<\/label>\n      <input type=\"text\" id=\"budget\" readonly>\n    <\/div>\n\n    <h3>Make Payment<\/h3>\n    <div id=\"qrcode\"><\/div>\n    <a id=\"upiLink\" href=\"#\" target=\"_blank\">\n      <button type=\"button\">Pay via UPI (Google Pay \/ PhonePe)<\/button>\n    <\/a>\n\n    <div class=\"form-group\">\n      <label>Transaction ID<\/label>\n      <input type=\"text\" id=\"transactionId\" required>\n    <\/div>\n\n    <button type=\"submit\" id=\"submitBtn\">Submit<\/button>\n\n    <div id=\"afterPayment\">\n      <button type=\"button\" id=\"pdfBtn\">\ud83d\udce5 Download PDF<\/button>\n      <button type=\"button\" id=\"whatsappBtn\">\ud83d\udcf2 Share on WhatsApp<\/button>\n    <\/div>\n  <\/form>\n\n  <script>\n    const upiId = \"spramderiya@oksbi\";\n    const upiName = \"Happy Camel Safari\";\n    let lastPdf; \/\/ to store PDF instance\n\n    function calculateBudget() {\n      let rooms = parseInt(document.getElementById(\"rooms\").value);\n      let children = parseInt(document.getElementById(\"children\").value);\n      let hotel = document.getElementById(\"hotel\").value;\n\n      let hotelCharge = 0;\n      switch (hotel) {\n        case \"1 Star\": hotelCharge = 200; break;\n        case \"2 Star\": hotelCharge = 400; break;\n        case \"3 Star\": hotelCharge = 600; break;\n        case \"4 Star\": hotelCharge = 1000; break;\n        case \"5 Star\": hotelCharge = 2000; break;\n        case \"6 Star\": hotelCharge = 4000; break;\n        case \"7 Star\": hotelCharge = 6000; break;\n      }\n\n      let budget = (rooms * 1000) + (children * 500) + hotelCharge;\n      document.getElementById(\"budget\").value = budget;\n\n      const upiString = `upi:\/\/pay?pa=${upiId}&pn=${upiName}&am=${budget}&cu=INR`;\n      document.getElementById(\"upiLink\").href = upiString;\n\n      document.getElementById(\"qrcode\").innerHTML = \"\";\n      new QRCode(document.getElementById(\"qrcode\"), upiString);\n    }\n\n    async function generatePDF() {\n      const { jsPDF } = window.jspdf;\n      const doc = new jsPDF();\n      \n      const form = document.getElementById(\"bookingForm\");\n      if (!form.checkValidity()) {\n          alert(\"\u0915\u0943\u092a\u092f\u093e \u0938\u092d\u0940 \u0906\u0935\u0936\u094d\u092f\u0915 \u092b\u093c\u0940\u0932\u094d\u0921 \u092d\u0930\u0947\u0902\u0964\");\n          return;\n      }\n\n      \/\/ Header\n      doc.setFillColor(255, 215, 0);\n      doc.rect(0, 0, 210, 20, \"F\");\n      doc.setFontSize(16);\n      doc.setTextColor(128, 64, 0);\n      doc.text(\"\ud83d\udc2a Happy Camel Safari - Booking Receipt\", 20, 15);\n\n      \/\/ Table Data\n      const tableData = [\n        [\"Name\", document.getElementById(\"name\").value],\n        [\"Mobile\", document.getElementById(\"mobile\").value],\n        [\"Email\", document.getElementById(\"email\").value],\n        [\"Check In\", document.getElementById(\"checkin\").value],\n        [\"Check Out\", document.getElementById(\"checkout\").value],\n        [\"Rooms\", document.getElementById(\"rooms\").value],\n        [\"Hotel Category\", document.getElementById(\"hotel\").value],\n        [\"Children\", document.getElementById(\"children\").value],\n        [\"Budget\", \"\u20b9\" + document.getElementById(\"budget\").value],\n        [\"Transaction ID\", document.getElementById(\"transactionId\").value],\n        [\"Hotel Info\", \"Happy Camel Safari Resort, Jaisalmer\\nContact: +91-9876543210\"]\n      ];\n\n      doc.autoTable({\n        body: tableData,\n        startY: 30,\n        theme: \"grid\",\n        styles: { fillColor: [240, 248, 255], textColor: [0, 0, 0], fontSize: 10 },\n        columnStyles: {\n          0: { fontStyle: 'bold' }\n        }\n      });\n\n      let y = doc.lastAutoTable.finalY + 10;\n\n      \/\/ Add Images\n      const selfieFile = document.getElementById(\"selfie\").files[0];\n      const idFile = document.getElementById(\"idProof\").files[0];\n      if (selfieFile && idFile) {\n        const selfieData = await toBase64(selfieFile);\n        const idData = await toBase64(idFile);\n        doc.text(\"Customer Photos:\", 20, y);\n        doc.addImage(selfieData, \"JPEG\", 20, y + 5, 50, 50);\n        doc.addImage(idData, \"JPEG\", 120, y + 5, 50, 50);\n        y += 60;\n      }\n\n      \/\/ Signature\n      doc.text(\"Signature: _______________________\", 20, y + 20);\n\n      \/\/ Footer\n      doc.setTextColor(128, 64, 0);\n      doc.text(\"\ud83d\ude4f Thank You for Choosing Happy Camel Safari \ud83d\ude4f\", 20, y + 40);\n\n      lastPdf = doc; \/\/ store pdf instance\n      document.getElementById(\"afterPayment\").style.display = \"block\";\n    }\n\n    function toBase64(file) {\n      return new Promise((resolve, reject) => {\n        const reader = new FileReader();\n        reader.readAsDataURL(file);\n        reader.onload = () => resolve(reader.result);\n        reader.onerror = error => reject(error);\n      });\n    }\n\n    \/\/ Image Preview function\n    function setupImagePreview(inputId, previewId) {\n        document.getElementById(inputId).addEventListener('change', function(event) {\n            const previewContainer = document.getElementById(previewId);\n            previewContainer.innerHTML = '';\n            const file = event.target.files[0];\n            if (file) {\n                const reader = new FileReader();\n                reader.onload = function(e) {\n                    const img = document.createElement('img');\n                    img.src = e.target.result;\n                    previewContainer.appendChild(img);\n                }\n                reader.readAsDataURL(file);\n            }\n        });\n    }\n    \n    \/\/ Setup preview for both image inputs\n    setupImagePreview('selfie', 'selfie-preview');\n    setupImagePreview('idProof', 'idProof-preview');\n\n    \/\/ Event listener for form submission\n    document.getElementById(\"bookingForm\").addEventListener(\"submit\", function(event) {\n      event.preventDefault(); \/\/ Prevents the default form submission\n      generatePDF();\n    });\n\n    \/\/ Download Button\n    document.getElementById(\"pdfBtn\").addEventListener(\"click\", () => {\n      if(lastPdf) lastPdf.save(\"Booking_Receipt.pdf\");\n    });\n\n    \/\/ WhatsApp Button\n    document.getElementById(\"whatsappBtn\").addEventListener(\"click\", () => {\n      const msg = `\ud83d\udc2a Happy Camel Safari Booking Confirmed!\nName: ${document.getElementById(\"name\").value}\nMobile: ${document.getElementById(\"mobile\").value}\nCheckIn: ${document.getElementById(\"checkin\").value}\nCheckOut: ${document.getElementById(\"checkout\").value}\nRooms: ${document.getElementById(\"rooms\").value}\nHotel: ${document.getElementById(\"hotel\").value}\nChildren: ${document.getElementById(\"children\").value}\nBudget: \u20b9${document.getElementById(\"budget\").value}\nTxnID: ${document.getElementById(\"transactionId\").value}`;\n      window.open(`https:\/\/wa.me\/?text=${encodeURIComponent(msg)}`, \"_blank\");\n    });\n\n    calculateBudget();\n  <\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Happy Camel Safari &#8211; Booking Form \ud83d\udc2a Happy Camel Safari &#8211; Booking Form Check In Check Out Rooms 1 Room2 Rooms3 Rooms4 Rooms5 Rooms Hotel Category 1 Star2 Star3 Star4 Star5 Star6 Star7 Star Children 01234 Name Mobile Email Upload Selfie Photo Upload ID Proof Photo Auto Budget (\u20b9) Make Payment Pay via UPI (Google [&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-221","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages\/221","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=221"}],"version-history":[{"count":13,"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages\/221\/revisions"}],"predecessor-version":[{"id":234,"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=\/wp\/v2\/pages\/221\/revisions\/234"}],"wp:attachment":[{"href":"https:\/\/happycamelsafari.sabpro.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}