{"id":27,"date":"2025-08-19T19:52:03","date_gmt":"2025-08-19T19:52:03","guid":{"rendered":"https:\/\/online.rampratapsiyag.com\/?page_id=27"},"modified":"2025-08-19T19:57:43","modified_gmt":"2025-08-19T19:57:43","slug":"27-2","status":"publish","type":"page","link":"https:\/\/online.rampratapsiyag.com\/?page_id=27","title":{"rendered":"booking"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull is-layout-flow wp-container-core-group-is-layout-f9cb6abc 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-d9884270 wp-block-columns-is-layout-flex is-style-section-2--1\" 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<div class=\"wp-block-cover is-light\" style=\"min-height:244px;aspect-ratio:unset;\"><img decoding=\"async\" class=\"wp-block-cover__image-background\" alt=\"Close up photo of white flowers on a grey background\" src=\"https:\/\/online.rampratapsiyag.com\/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\n\n\n<!DOCTYPE html>\n<html lang=\"hi\">\n<head>\n<meta charset=\"utf-8\"\/>\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"\/>\n<title>RampratapSiag.com &#8211; Cab Booking \u2014 Full Verified Flow<\/title>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrious\/4.0.2\/qrious.min.js\"><\/script>\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.8.3\/jspdf.plugin.autotable.min.js\"><\/script>\n\n<style>\n  :root{\n    --brand1:#6a11cb; --brand2:#2575fc; --accent:#ff9933;\n    --ink:#0b2545; --muted:#5b6b82; --bg:#f6f9ff; --card:#ffffff;\n    --success:#0bbd7e; --danger:#e53935;\n  }\n  *{box-sizing:border-box}\n  body{font-family:Arial, Helvetica, sans-serif;background:var(--bg);color:var(--ink);margin:0;padding:16px}\n  .wrap{max-width:980px;margin:0 auto}\n  h1{margin:0 0 10px;font-size:20px}\n  .ribbon{display:flex;border-radius:10px;overflow:hidden;margin-bottom:12px}\n  .ribbon div{height:6px;flex:1}\n  .c1{background:var(--accent)} .c2{background:#fff} .c3{background:#138808}\n\n  .card{background:var(--card);padding:14px;border-radius:12px;box-shadow:0 8px 22px rgba(10,20,40,.06);margin-bottom:14px}\n  label{display:block;font-weight:700;margin-top:10px}\n  input[type=\"text\"], input[type=\"email\"], input[type=\"tel\"], input[type=\"date\"], select {\n    width:100%;padding:10px;margin-top:6px;border-radius:10px;border:1px solid #d7e0f2;font-size:14px;background:#fff\n  }\n  input[type=\"file\"]{margin-top:6px}\n  .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}\n  .note{background:#fff8e6;border-left:4px solid #f0a500;padding:10px;border-radius:8px;color:#6b4a00;margin-top:10px}\n  .btn{display:inline-block;padding:10px 14px;border-radius:12px;border:none;background:linear-gradient(90deg,var(--brand1),var(--brand2));color:#fff;font-weight:800;cursor:pointer;margin-top:12px}\n  .btn.alt{background:linear-gradient(90deg,#ff9933,#ff5e5e)}\n  .btn.small{padding:8px 10px;font-size:13px;border-radius:10px}\n  .muted{color:var(--muted);font-size:13px}\n  .center{text-align:center}\n  .flex{display:flex;gap:10px;align-items:center}\n  .thumb{width:96px;height:96px;object-fit:cover;border-radius:8px;border:1px solid #e6eefc;background:#fafcff}\n  .hidden{display:none}\n  .progress{display:flex;gap:6px;margin-bottom:10px}\n  .step{flex:1;padding:6px;border-radius:8px;background:#eef5ff;color:var(--muted);text-align:center;font-weight:700;font-size:13px}\n  .step.active{background:linear-gradient(90deg,var(--brand1),var(--brand2));color:#fff}\n  @media(max-width:760px){\n    .row{grid-template-columns:1fr}\n    .thumb{width:72px;height:72px}\n  }\n  .help-container{position:fixed;bottom:100px;left:16px;z-index:9999}\n  .hidden-button{background:#ff9800;color:#fff;padding:8px 12px;border-radius:24px 24px 0 24px;border:none;cursor:pointer;font-weight:700;box-shadow:0 6px 22px rgba(0,0,0,.18)}\n  .note-small{font-size:13px;color:#444;margin-top:8px}\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\">\n\n  <div class=\"ribbon\"><div class=\"c1\"><\/div><div class=\"c2\"><\/div><div class=\"c3\"><\/div><\/div>\n  <h1>RampratapSiag.com &#8211; Cab Booking \u2014 Full Verified Flow<\/h1>\n  <p class=\"muted\">Step-by-step: Details \u2192 Verification \u2192 Payment \u2192 Confirm &#038; PDF<\/p>\n\n  <div class=\"progress\">\n    <div id=\"s1\" class=\"step active\">1 \u2014 Details<\/div>\n    <div id=\"s2\" class=\"step\">2 \u2014 Verification<\/div>\n    <div id=\"s3\" class=\"step\">3 \u2014 Payment<\/div>\n    <div id=\"s4\" class=\"step\">4 \u2014 Confirm &#038; PDF<\/div>\n  <\/div>\n\n  <form id=\"form1\" class=\"card\" autocomplete=\"off\">\n    <label>Your Full Name<\/label>\n    <input id=\"t_name\" type=\"text\" placeholder=\"Your full name\" required>\n\n    <div class=\"row\">\n      <div>\n        <label>Email<\/label>\n        <input id=\"t_email\" type=\"email\" placeholder=\"email@example.com\" required>\n      <\/div>\n      <div>\n        <label>Phone<\/label>\n        <input id=\"t_phone\" type=\"tel\" placeholder=\"+91xxxxxxxxxx or +44...\" required>\n      <\/div>\n    <\/div>\n\n    <div class=\"row\">\n      <div>\n        <label>Website Name<\/label>\n        <input id=\"h_name\" type=\"text\" value=\"RampratapSiag.com\" readonly>\n      <\/div>\n      <div>\n        <label>Booking ID Prefix<\/label>\n        <input id=\"h_id\" type=\"text\" value=\"CAB-RS-2025\" readonly>\n      <\/div>\n    <\/div>\n\n    <label>Select Vehicle Type (per km)<\/label>\n    <select id=\"bk_lang\" required>\n      <option value=\"\">&#8212; Choose &#8212;<\/option>\n      <option value=\"Sedan|12\">Sedan (\u20b912\/km)<\/option>\n      <option value=\"SUV|16\">SUV (\u20b916\/km)<\/option>\n      <option value=\"Innova|20\">Innova (\u20b920\/km)<\/option>\n    <\/select>\n\n    <div class=\"row\">\n      <div>\n        <label>Total Kilometers<\/label>\n        <input id=\"bk_kms\" type=\"text\" placeholder=\"Enter total distance in KMs\" required>\n      <\/div>\n      <div>\n        <label>Booking Date<\/label>\n        <input id=\"bk_date\" type=\"date\" required>\n      <\/div>\n    <\/div>\n\n    <div class=\"note\">The system will calculate the total fare. Click NEXT to proceed to verification (ID\/photo upload).<\/div>\n\n    <div style=\"display:flex;justify-content:flex-end;gap:10px;margin-top:12px\">\n      <button type=\"button\" id=\"nextToVerify\" class=\"btn\">Next \u2014 Verify<\/button>\n    <\/div>\n  <\/form>\n\n  <div id=\"verifyCard\" class=\"card hidden\">\n    <label>ID Type<\/label>\n    <select id=\"t_idtype\">\n      <option value=\"\">&#8212; Select ID Type &#8212;<\/option>\n      <option value=\"Aadhaar\">Aadhaar Card<\/option>\n      <option value=\"Driving\">Driving Licence<\/option>\n      <option value=\"Passport\">Passport<\/option>\n      <option value=\"Foreign\">Foreign ID<\/option>\n    <\/select>\n    \n    <label>ID Number<\/label>\n    <input id=\"t_idnum\" type=\"text\" placeholder=\"Enter ID number\">\n\n    <div class=\"row\" style=\"margin-top:10px\">\n      <div>\n        <label>Upload Self Photo (Selfie)<\/label>\n        <input id=\"selfPhoto\" type=\"file\" accept=\"image\/*\">\n        <div style=\"margin-top:8px\"><img id=\"selfPreview\" class=\"thumb hidden\" alt=\"self preview\"><\/div>\n      <\/div>\n      <div>\n        <label>Upload ID Front Photo<\/label>\n        <input id=\"idFrontPhoto\" type=\"file\" accept=\"image\/*\">\n        <div style=\"margin-top:8px\"><img id=\"idPreview\" class=\"thumb hidden\" alt=\"id preview\"><\/div>\n      <\/div>\n    <\/div>\n\n    <div style=\"display:flex;justify-content:space-between;gap:8px;margin-top:12px\">\n        <button id=\"backToStep1\" class=\"btn small\">Back<\/button>\n        <button id=\"confirmBtn\" class=\"btn small\">Confirm &#038; Proceed to Payment<\/button>\n    <\/div>\n  <\/div>\n\n  <div id=\"paymentCard\" class=\"card hidden\">\n    <h3 class=\"center\">Payment<\/h3>\n    <div style=\"display:flex;gap:12px;flex-wrap:wrap;align-items:center\">\n      <canvas id=\"qrCanvas\" width=\"200\" height=\"200\" aria-label=\"Payment QR\"><\/canvas>\n      <div style=\"flex:1\">\n        <p id=\"amountText\" style=\"font-weight:800;font-size:16px\"><\/p>\n        <small class=\"muted\">Payee: <b id=\"payeeName\"><\/b> \u2022 UPI: <b id=\"upiIdLabel\"><\/b><\/small>\n        <div style=\"margin-top:8px\"><a id=\"payNow\" class=\"btn small\" href=\"#\" target=\"_blank\">Pay Now (Open UPI App)<\/a><\/div>\n      <\/div>\n    <\/div>\n\n    <label style=\"margin-top:12px\">Enter Transaction \/ UTR ID (after payment)<\/label>\n    <input id=\"txnId\" type=\"text\" placeholder=\"Txn \/ UTR ID\">\n\n    <div style=\"display:flex;justify-content:space-between;gap:8px;margin-top:12px\">\n      <button id=\"backToVerify\" class=\"btn small\">Back<\/button>\n      <button id=\"confirmTxnBtn\" class=\"btn alt\">Confirm Payment &#038; Finalize<\/button>\n    <\/div>\n  <\/div>\n\n  <div id=\"finalCard\" class=\"card hidden\">\n    <h3 class=\"center\">Booking Confirmed \u2014 eTicket Ready<\/h3>\n    <p class=\"muted center\">Download colorful PDF (or B\/W for print). WhatsApp button opens chat with full booking text. To send PDF itself, attach downloaded PDF in WhatsApp chat.<\/p>\n\n    <div style=\"display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px\">\n      <button id=\"downloadColor\" class=\"btn\">Download Color PDF<\/button>\n      <button id=\"downloadBW\" class=\"btn small\">Download B\/W PDF<\/button>\n      <button id=\"whatsappShare\" class=\"btn\" style=\"background:linear-gradient(90deg,#25D366,#128C7E)\">Send Full Details on WhatsApp<\/button>\n    <\/div>\n\n    <div style=\"margin-top:12px\">\n      <h4>Booking Summary (final)<\/h4>\n      <div id=\"finalSummary\" class=\"card\" style=\"padding:12px\"><\/div>\n    <\/div>\n\n    <div class=\"note\" style=\"margin-top:12px\">\n      <b>Note:<\/b> PDF downloads are available above. WhatsApp button sends full booking text including ID, DOB and Txn. To attach PDF file to WhatsApp, open the chat manually and add the downloaded PDF.\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<div class=\"help-container\"><button class=\"hidden-button\" onclick=\"alert('Contact button \u2014 configure contact details in code')\">\ud83d\udcf2 Contact<\/button><\/div>\n\n<script>\n\/* CONFIG *\/\nconst UPI_ID = \"ajaybissa@upi\";\nconst PAYEE_NAME = \"Ajay Bissa\";\n\nlet booking = {};\nlet qrInstance = null;\nlet selfPhotoData = null;\nlet idPhotoData = null;\n\n\/* helpers *\/\nfunction $(id){ return document.getElementById(id); }\nfunction setStep(n){\n  for(let i=1;i<=4;i++){ $('s'+i).classList.toggle('active', i===n); }\n  $('form1').classList.toggle('hidden', n!==1);\n  $('verifyCard').classList.toggle('hidden', n!==2);\n  $('paymentCard').classList.toggle('hidden', n!==3);\n  $('finalCard').classList.toggle('hidden', n!==4);\n}\nfunction formatDateForPDF(dateString) {\n  if (!dateString) return 'N\/A';\n  try {\n    const d = new Date(dateString + \"T00:00:00\");\n    if (isNaN(d.getTime())) {\n      return 'Invalid Date';\n    }\n    const day = String(d.getDate()).padStart(2, '0');\n    const month = String(d.getMonth() + 1).padStart(2, '0');\n    const year = d.getFullYear();\n    return `${day}\/${month}\/${year}`;\n  } catch (e) {\n    return 'Invalid Date';\n  }\n}\nfunction getPhotoDataURI(fileInput, callback) {\n  const file = fileInput.files[0];\n  if (file) {\n    const reader = new FileReader();\n    reader.onload = function(e) {\n      callback(e.target.result);\n    };\n    reader.readAsDataURL(file);\n  } else {\n    callback(null);\n  }\n}\n\n\/* init *\/\nsetStep(1);\n\n\/* STEP 1 -> STEP 2 *\/\n$('nextToVerify').addEventListener('click', function(){\n  const t_name = $('t_name').value.trim();\n  const t_email = $('t_email').value.trim();\n  const t_phone = $('t_phone').value.trim();\n  const car_type_val = $('bk_lang').value;\n  const total_kms_val = parseFloat($('bk_kms').value.trim());\n  const bk_date_val = $('bk_date').value;\n\n  if(!t_name || !t_email || !t_phone || !car_type_val || isNaN(total_kms_val) || !bk_date_val){\n    alert('\u0915\u0943\u092a\u092f\u093e \u0938\u092d\u0940 \u092b\u0940\u0932\u094d\u0921 \u092d\u0930\u0947\u0902 (Step 1)');\n    return;\n  }\n  \n  const parts = car_type_val.split('|');\n  const car_name = parts[0];\n  const rate_per_km = parseInt(parts[1], 10);\n  const total_fee = total_kms_val * rate_per_km;\n\n  booking = {\n    t_name: t_name,\n    t_email: t_email,\n    t_phone: t_phone,\n    h_name: $('h_name').value,\n    h_id: $('h_id').value,\n    car_type: car_name,\n    rate_per_km: rate_per_km,\n    total_kms: total_kms_val,\n    total_fee: total_fee,\n    booking_date: bk_date_val\n  };\n  setStep(2);\n});\n\n\/\/ Show image preview and store data URI\n$('selfPhoto').addEventListener('change', function(e){\n  getPhotoDataURI(this, function(uri){\n    if(uri) {\n      $('selfPreview').src = uri;\n      $('selfPreview').classList.remove('hidden');\n      selfPhotoData = uri;\n    } else {\n      $('selfPreview').classList.add('hidden');\n      selfPhotoData = null;\n    }\n  });\n});\n\n$('idFrontPhoto').addEventListener('change', function(e){\n  getPhotoDataURI(this, function(uri){\n    if(uri) {\n      $('idPreview').src = uri;\n      $('idPreview').classList.remove('hidden');\n      idPhotoData = uri;\n    } else {\n      $('idPreview').classList.add('hidden');\n      idPhotoData = null;\n    }\n  });\n});\n\n\/* STEP 2 -> STEP 3 *\/\n$('confirmBtn').addEventListener('click', function(){\n  const t_idnum = $('t_idnum').value.trim();\n  if(!t_idnum){ alert('Please enter ID number.'); return; }\n  \n  booking.t_id_type = $('t_idtype').value;\n  booking.t_id_num = t_idnum;\n  booking.selfPhoto = selfPhotoData;\n  booking.idPhoto = idPhotoData;\n\n  \/\/ set payment details\n  $('payeeName').textContent = PAYEE_NAME;\n  $('upiIdLabel').textContent = UPI_ID;\n  $('amountText').textContent = `Amount to Pay: \u20b9${booking.total_fee.toLocaleString('en-IN')}`;\n\n  const upiUrl = `upi:\/\/pay?pa=${UPI_ID}&pn=${encodeURIComponent(PAYEE_NAME)}&am=${booking.total_fee}&cu=INR&tn=${encodeURIComponent('Cab Booking')}`;\n  $('payNow').href = upiUrl;\n\n  if(qrInstance) qrInstance.clear();\n  qrInstance = new QRious({\n    element: $('qrCanvas'),\n    value: upiUrl,\n    size: 200,\n    background: '#ffffff',\n    foreground: '#0b2545'\n  });\n  setStep(3);\n});\n\n\/\/ Back buttons\n$('backToStep1').addEventListener('click', function(){ setStep(1); });\n$('backToVerify').addEventListener('click', function(){ setStep(2); });\n\n\/* STEP 3 -> STEP 4 *\/\n$('confirmTxnBtn').addEventListener('click', function(){\n  const txnId = $('txnId').value.trim();\n  if(!txnId){ alert('Please enter Transaction ID\/UTR ID.'); return; }\n  booking.txn_id = txnId;\n  \n  \/\/ Final summary\n  const bdate = formatDateForPDF(booking.booking_date);\n\n  $('finalSummary').innerHTML = `\n    <b>Guest Name:<\/b> ${booking.t_name}<br>\n    <b>Booking ID:<\/b> ${booking.h_id}-${Date.now().toString().slice(-6)}<br>\n    <b>Website Name:<\/b> ${booking.h_name}<br>\n    <b>Vehicle Type:<\/b> ${booking.car_type}<br>\n    <b>Booking Date:<\/b> ${bdate}<br>\n    <b>Total Kilometers:<\/b> ${booking.total_kms} KM<br>\n    <b>Rate per KM:<\/b> \u20b9${booking.rate_per_km.toLocaleString('en-IN')}<br>\n    <b>Total Amount:<\/b> \u20b9${booking.total_fee.toLocaleString('en-IN')}<br>\n    <b>Transaction ID:<\/b> ${booking.txn_id}<br>\n    <br>\n    <b>ID Type:<\/b> ${booking.t_id_type}<br>\n    <b>ID Number:<\/b> ${booking.t_id_num}<br>\n  `;\n  setStep(4);\n});\n\n\/* PDF GENERATION *\/\nfunction generatePDF(isColor){\n  const { jsPDF } = window.jspdf;\n  const doc = new jsPDF();\n  const primaryColor = isColor ? '#6a11cb' : '#000000';\n  const secondaryColor = isColor ? '#2575fc' : '#333333';\n  \n  \/\/ Multiple Watermarks\n  doc.setFontSize(28);\n  doc.setTextColor(isColor ? '#dcdcdc' : '#e0e0e0');\n  doc.setGState(new doc.GState({opacity: 0.4}));\n  const watermarkText = \"RAMPRATAPSIAG.COM\";\n  const positions = [\n    {x: 50, y: 30, a: 45}, {x: 150, y: 70, a: 45},\n    {x: 50, y: 110, a: 45}, {x: 150, y: 150, a: 45},\n    {x: 50, y: 190, a: 45}, {x: 150, y: 230, a: 45},\n    {x: 50, y: 270, a: 45}\n  ];\n  positions.forEach(pos => {\n    doc.text(watermarkText, pos.x, pos.y, {angle: pos.a});\n  });\n  doc.setGState(new doc.GState({opacity: 1.0}));\n  \n  doc.setFontSize(22);\n  doc.setTextColor(primaryColor);\n  doc.setFont(\"helvetica\", \"bold\");\n  doc.text(\"RampratapSiag.com - Cab Booking\", 105, 20, null, null, \"center\");\n\n  doc.setFontSize(10);\n  doc.setTextColor(isColor ? '#5b6b82' : '#555555');\n  doc.setFont(\"helvetica\", \"normal\");\n  doc.text(`Booking ID: ${booking.h_id}-${Date.now().toString().slice(-6)}`, 105, 28, null, null, \"center\");\n\n  doc.setDrawColor(primaryColor);\n  doc.line(20, 35, 185, 35);\n\n  let currentY = 45;\n\n  \/\/ Add photos side-by-side if available\n  const photoSize = 40;\n  if (booking.selfPhoto || booking.idPhoto) {\n      if (booking.selfPhoto) {\n          doc.addImage(booking.selfPhoto, 'JPEG', 20, currentY, photoSize, photoSize);\n          doc.setFontSize(8);\n          doc.setTextColor(isColor ? '#5b6b82' : '#555555');\n          doc.text(\"Selfie Photo\", 20, currentY + photoSize + 3);\n      }\n      if (booking.idPhoto) {\n          const xPos = booking.selfPhoto ? 70 : 20;\n          doc.addImage(booking.idPhoto, 'JPEG', xPos, currentY, photoSize, photoSize);\n          doc.setFontSize(8);\n          doc.setTextColor(isColor ? '#5b6b82' : '#555555');\n          doc.text(\"ID Photo\", xPos, currentY + photoSize + 3);\n      }\n      currentY += photoSize + 15;\n  }\n  \n  doc.setTextColor(secondaryColor);\n  doc.setFontSize(14);\n  doc.text(\"Booking Details\", 20, currentY + 5);\n\n  const bdate = formatDateForPDF(booking.booking_date);\n\n  const tableData = [\n    [\"Customer Name\", booking.t_name],\n    [\"Website\", booking.h_name],\n    [\"Vehicle Type\", booking.car_type],\n    [\"Booking Date\", bdate],\n    [\"Total Kilometers\", `${booking.total_kms} KM`],\n    [\"Rate per KM\", `\u20b9${booking.rate_per_km.toLocaleString('en-IN')}`],\n    [\"Total Amount\", `\u20b9${booking.total_fee.toLocaleString('en-IN')}`],\n  ];\n\n  doc.autoTable({\n    startY: currentY + 10,\n    head: [['Field', 'Details']],\n    body: tableData,\n    theme: 'striped',\n    styles: {\n      fontSize: 10,\n      textColor: isColor ? '#0b2545' : '#000000',\n      fillColor: isColor ? '#f6f9ff' : '#ffffff',\n    },\n    headStyles: {\n      fillColor: [isColor ? 106 : 0, isColor ? 17 : 0, isColor ? 203 : 0],\n      textColor: isColor ? 255 : 255,\n      fontStyle: 'bold'\n    },\n  });\n  const finalY = doc.autoTable.previous.finalY;\n\n  doc.setTextColor(secondaryColor);\n  doc.setFontSize(14);\n  doc.text(\"Verification & Payment\", 20, finalY + 15);\n\n  const finalTable = [\n    [\"ID Type\", booking.t_id_type],\n    [\"ID Number\", booking.t_id_num],\n    [\"Transaction ID\", booking.txn_id]\n  ];\n\n  doc.autoTable({\n    startY: finalY + 20,\n    head: [['Field', 'Details']],\n    body: finalTable,\n    theme: 'striped',\n    styles: {\n      fontSize: 10,\n      textColor: isColor ? '#0b2545' : '#000000',\n      fillColor: isColor ? '#f6f9ff' : '#ffffff',\n    },\n    headStyles: {\n      fillColor: [isColor ? 106 : 0, isColor ? 17 : 0, isColor ? 203 : 0],\n      textColor: isColor ? 255 : 255,\n      fontStyle: 'bold'\n    },\n  });\n\n  const finalY2 = doc.autoTable.previous.finalY;\n  doc.setFontSize(12);\n  doc.setTextColor(isColor ? '#5b6b82' : '#555555');\n  doc.setFont(\"helvetica\", \"italic\");\n  doc.text(\"Thank you for your booking!\", 105, finalY2 + 25, null, null, \"center\");\n\n  doc.setFontSize(8);\n  doc.setTextColor(isColor ? '#5b6b82' : '#888888');\n  doc.text(\"This is an electronically generated e-ticket and does not require a signature.\", 105, finalY2 + 35, null, null, \"center\");\n\n  doc.save(`Cab_Booking_${booking.t_name}.pdf`);\n}\n\n$('downloadColor').addEventListener('click', function(){ generatePDF(true); });\n$('downloadBW').addEventListener('click', function(){ generatePDF(false); });\n\n\/* WhatsApp Share *\/\n$('whatsappShare').addEventListener('click', function(){\n  const bdate = formatDateForPDF(booking.booking_date);\n  const msg = `\n*RampratapSiag.com - Cab Booking Confirmation*\n\n*Customer Name:* ${booking.t_name}\n*Booking ID:* ${booking.h_id}-${Date.now().toString().slice(-6)}\n*Website:* ${booking.h_name}\n*Vehicle Type:* ${booking.car_type}\n*Booking Date:* ${bdate}\n*Total Kilometers:* ${booking.total_kms} KM\n*Rate per KM:* \u20b9${booking.rate_per_km.toLocaleString('en-IN')}\n*Total Amount:* \u20b9${booking.total_fee.toLocaleString('en-IN')}\n*Transaction ID:* ${booking.txn_id}\n\n*Verification Details:*\n*ID Type:* ${booking.t_id_type}\n*ID Number:* ${booking.t_id_num}\n\n*Thank you for your booking!*\n`;\n  const whatsappUrl = `https:\/\/wa.me\/?text=${encodeURIComponent(msg)}`;\n  window.open(whatsappUrl, '_blank');\n});\n\n<\/script>\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>RampratapSiag.com &#8211; Cab Booking \u2014 Full Verified Flow RampratapSiag.com &#8211; Cab Booking \u2014 Full Verified Flow Step-by-step: Details \u2192 Verification \u2192 Payment \u2192 Confirm &#038; PDF 1 \u2014 Details 2 \u2014 Verification 3 \u2014 Payment 4 \u2014 Confirm &#038; PDF Your Full Name Email Phone Website Name Booking ID Prefix Select Vehicle Type (per km) [&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-27","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/online.rampratapsiyag.com\/index.php?rest_route=\/wp\/v2\/pages\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/online.rampratapsiyag.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/online.rampratapsiyag.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/online.rampratapsiyag.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/online.rampratapsiyag.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=27"}],"version-history":[{"count":2,"href":"https:\/\/online.rampratapsiyag.com\/index.php?rest_route=\/wp\/v2\/pages\/27\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/online.rampratapsiyag.com\/index.php?rest_route=\/wp\/v2\/pages\/27\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/online.rampratapsiyag.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}