{"id":606,"date":"2026-08-06T06:14:50","date_gmt":"2026-08-06T06:14:50","guid":{"rendered":"https:\/\/training25.persistenttechnology.in\/?page_id=606"},"modified":"2026-08-17T06:03:41","modified_gmt":"2026-08-17T06:03:41","slug":"cancel-booking","status":"publish","type":"page","link":"https:\/\/training25.persistenttechnology.in\/?page_id=606","title":{"rendered":"cancel Booking"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n DriveEase - Cancel Reservation<\/title>\r\n <style>\r\n :root {\r\n --primary: #2563eb;\r\n --primary-dark: #1d4ed8;\r\n --danger: #dc2626;\r\n --danger-dark: #b91c1c;\r\n --success: #16a34a;\r\n --bg-light: #f8fafc;\r\n --card-bg: #ffffff;\r\n --text-dark: #0f172a;\r\n --text-muted: #64748b;\r\n --border: #e2e8f0;\r\n --radius: 12px;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\r\n }\r\n\r\n body {\r\n background-color: var(--bg-light);\r\n color: var(--text-dark);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* Navigation Header *\/\r\n header {\r\n background: var(--card-bg);\r\n border-bottom: 1px solid var(--border);\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n }\r\n\r\n .navbar {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 1rem 2rem;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .logo {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: var(--primary);\r\n text-decoration: none;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n gap: 2rem;\r\n list-style: none;\r\n }\r\n\r\n .nav-links a {\r\n text-decoration: none;\r\n color: var(--text-dark);\r\n font-weight: 500;\r\n transition: color 0.2s;\r\n }\r\n\r\n .nav-links a:hover {\r\n color: var(--primary);\r\n }\r\n\r\n \/* Container & Cards *\/\r\n .container {\r\n max-width: 800px;\r\n margin: 2.5rem auto 4rem;\r\n padding: 0 1.5rem;\r\n }\r\n\r\n .card {\r\n background: var(--card-bg);\r\n border-radius: var(--radius);\r\n border: 1px solid var(--border);\r\n padding: 2rem;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .card-title {\r\n font-size: 1.25rem;\r\n font-weight: 600;\r\n margin-bottom: 1.25rem;\r\n color: var(--text-dark);\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n \/* Form Elements *\/\r\n .form-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 1rem;\r\n }\r\n\r\n .full-width {\r\n grid-column: span 2;\r\n }\r\n\r\n .form-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.4rem;\r\n }\r\n\r\n .form-group label {\r\n font-size: 0.875rem;\r\n font-weight: 600;\r\n color: var(--text-dark);\r\n }\r\n\r\n .form-group input, .form-group select, .form-group textarea {\r\n padding: 0.75rem;\r\n border: 1px solid var(--border);\r\n border-radius: 6px;\r\n font-size: 1rem;\r\n outline: none;\r\n }\r\n\r\n .form-group input:focus, .form-group select:focus, .form-group textarea:focus {\r\n border-color: var(--primary);\r\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\r\n }\r\n\r\n \/* Buttons *\/\r\n .btn {\r\n display: inline-block;\r\n padding: 0.75rem 1.5rem;\r\n border: none;\r\n border-radius: 6px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n text-align: center;\r\n transition: background-color 0.2s, transform 0.1s;\r\n font-size: 1rem;\r\n }\r\n\r\n .btn-primary {\r\n background-color: var(--primary);\r\n color: white;\r\n }\r\n\r\n .btn-primary:hover {\r\n background-color: var(--primary-dark);\r\n }\r\n\r\n .btn-danger {\r\n background-color: var(--danger);\r\n color: white;\r\n }\r\n\r\n .btn-danger:hover {\r\n background-color: var(--danger-dark);\r\n }\r\n\r\n .btn-secondary {\r\n background-color: #e2e8f0;\r\n color: var(--text-dark);\r\n }\r\n\r\n .btn-secondary:hover {\r\n background-color: #cbd5e1;\r\n }\r\n\r\n \/* Booking Summary Section *\/\r\n #bookingDetails {\r\n display: none;\r\n }\r\n\r\n .details-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 1.25rem;\r\n background: var(--bg-light);\r\n padding: 1.25rem;\r\n border-radius: 8px;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .detail-item {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .detail-label {\r\n font-size: 0.8rem;\r\n color: var(--text-muted);\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n font-weight: 600;\r\n }\r\n\r\n .detail-value {\r\n font-size: 1rem;\r\n font-weight: 600;\r\n color: var(--text-dark);\r\n margin-top: 0.2rem;\r\n }\r\n\r\n \/* Policy & Refund Highlight *\/\r\n .policy-box {\r\n background: #eff6ff;\r\n border-left: 4px solid var(--primary);\r\n padding: 1rem;\r\n border-radius: 0 6px 6px 0;\r\n margin-bottom: 1.5rem;\r\n font-size: 0.9rem;\r\n color: #1e40af;\r\n }\r\n\r\n .refund-breakdown {\r\n border-top: 1px solid var(--border);\r\n padding-top: 1rem;\r\n margin-top: 1rem;\r\n }\r\n\r\n .refund-row {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 0.5rem;\r\n font-size: 0.95rem;\r\n }\r\n\r\n .refund-row.total {\r\n font-size: 1.15rem;\r\n font-weight: 700;\r\n color: var(--success);\r\n padding-top: 0.5rem;\r\n border-top: 1px dashed var(--border);\r\n }\r\n\r\n \/* Cancellation Rules List *\/\r\n .rules-list {\r\n list-style: none;\r\n font-size: 0.875rem;\r\n color: var(--text-muted);\r\n }\r\n\r\n .rules-list li {\r\n margin-bottom: 0.5rem;\r\n padding-left: 1.25rem;\r\n position: relative;\r\n }\r\n\r\n .rules-list li::before {\r\n content: \"\u2022\";\r\n position: absolute;\r\n left: 0;\r\n color: var(--primary);\r\n font-weight: bold;\r\n }\r\n\r\n \/* Modal Confirmation *\/\r\n .modal {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(15, 23, 42, 0.6);\r\n backdrop-filter: blur(4px);\r\n z-index: 1000;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 1rem;\r\n }\r\n\r\n .modal.active {\r\n display: flex;\r\n }\r\n\r\n .modal-content {\r\n background: var(--card-bg);\r\n width: 100%;\r\n max-width: 500px;\r\n border-radius: var(--radius);\r\n padding: 2rem;\r\n text-align: center;\r\n }\r\n\r\n .modal-icon {\r\n font-size: 3rem;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .modal-actions {\r\n display: flex;\r\n gap: 1rem;\r\n margin-top: 1.5rem;\r\n }\r\n\r\n .modal-actions .btn {\r\n flex: 1;\r\n }\r\n\r\n \/* Footer *\/\r\n footer {\r\n background: #0f172a;\r\n color: #94a3b8;\r\n text-align: center;\r\n padding: 2rem;\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .form-grid, .details-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .full-width {\r\n grid-column: span 1;\r\n }\r\n .nav-links {\r\n display: none;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Header Navigation -->\r\n <header>\r\n <nav class=\"navbar\">\r\n <a href=\"index.html\" class=\"logo\">\ud83d\ude98 DriveEase<\/a>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"index.html#fleet\">Our Fleet<\/a><\/li>\r\n <li><a href=\"index.html#about\">About Us<\/a><\/li>\r\n <li><a href=\"index.html#contact\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n <\/header>\r\n\r\n <main class=\"container\">\r\n \r\n <!-- Step 1: Booking Lookup Form -->\r\n <div class=\"card\" id=\"lookupCard\">\r\n <h2 class=\"card-title\">\ud83d\udd0d Find Your Booking<\/h2>\r\n <form id=\"lookupForm\" onsubmit=\"handleLookup(event)\">\r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label for=\"bookingId\">Booking Reference ID<\/label>\r\n <input type=\"text\" id=\"bookingId\" placeholder=\"e.g. DE-84920\" required>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"contactInfo\">Email or Phone Number<\/label>\r\n <input type=\"text\" id=\"contactInfo\" placeholder=\"e.g. rahul@example.com\" required>\r\n <\/div>\r\n\r\n <div class=\"form-group full-width\" style=\"margin-top: 0.5rem;\">\r\n <button type=\"submit\" class=\"btn btn-primary full-width\">Find Booking<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n <!-- Step 2: Booking Summary & Cancellation Action -->\r\n <div class=\"card\" id=\"bookingDetails\">\r\n <h2 class=\"card-title\">\ud83d\udccb Reservation Details<\/h2>\r\n \r\n <div class=\"details-grid\">\r\n <div class=\"detail-item\">\r\n <span class=\"detail-label\">Vehicle<\/span>\r\n <span class=\"detail-value\" id=\"dispCarName\">Family SUV<\/span>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <span class=\"detail-label\">Booking ID<\/span>\r\n <span class=\"detail-value\" id=\"dispBookingId\">DE-84920<\/span>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <span class=\"detail-label\">Pickup Date<\/span>\r\n <span class=\"detail-value\" id=\"dispPickup\">Aug 15, 2026<\/span>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <span class=\"detail-label\">Return Date<\/span>\r\n <span class=\"detail-value\" id=\"dispReturn\">Aug 18, 2026 (3 Days)<\/span>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <span class=\"detail-label\">Customer Name<\/span>\r\n <span class=\"detail-value\" id=\"dispName\">Rahul Sharma<\/span>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <span class=\"detail-label\">Pickup Location<\/span>\r\n <span class=\"detail-value\" id=\"dispLocation\">City Center Station<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Policy Alert -->\r\n <div class=\"policy-box\">\r\n \u2139\ufe0f <strong>Cancellation Status:<\/strong> Eligible for <strong>Full Refund<\/strong> (Cancelled more than 24 hours prior to pickup).\r\n <\/div>\r\n\r\n <!-- Refund Breakdown -->\r\n <h3 style=\"font-size: 1rem; margin-bottom: 0.5rem;\">Refund Estimate<\/h3>\r\n <div class=\"refund-breakdown\">\r\n <div class=\"refund-row\">\r\n <span>Total Amount Paid:<\/span>\r\n <span id=\"dispPaid\">\u20b919,500<\/span>\r\n <\/div>\r\n <div class=\"refund-row\">\r\n <span>Cancellation Fee:<\/span>\r\n <span id=\"dispFee\" style=\"color: var(--danger);\">\u20b90<\/span>\r\n <\/div>\r\n <div class=\"refund-row total\">\r\n <span>Estimated Refund Amount:<\/span>\r\n <span id=\"dispRefund\">\u20b919,500<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Reason Form -->\r\n <form id=\"cancelForm\" onsubmit=\"promptConfirmation(event)\" style=\"margin-top: 1.5rem;\">\r\n <div class=\"form-group full-width\" style=\"margin-bottom: 1rem;\">\r\n <label for=\"cancelReason\">Reason for Cancellation<\/label>\r\n <select id=\"cancelReason\" required>\r\n <option value=\"\">Select a reason<\/option>\r\n <option value=\"plans_changed\">Plans changed \/ Trip cancelled<\/option>\r\n <option value=\"found_cheaper\">Found a better deal<\/option>\r\n <option value=\"booked_by_mistake\">Booked by mistake<\/option>\r\n <option value=\"weather\">Bad weather \/ Flight delay<\/option>\r\n <option value=\"other\">Other reason<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group full-width\" style=\"margin-bottom: 1.5rem;\">\r\n <label for=\"cancelNotes\">Additional Feedback (Optional)<\/label>\r\n <textarea id=\"cancelNotes\" rows=\"3\" placeholder=\"Tell us how we can improve...\"><\/textarea>\r\n <\/div>\r\n\r\n <div style=\"display: flex; gap: 1rem;\">\r\n <button type=\"button\" class=\"btn btn-secondary\" onclick=\"resetLookup()\" style=\"flex: 1;\">Search Another<\/button>\r\n <button type=\"submit\" class=\"btn btn-danger\" style=\"flex: 2;\">Cancel Reservation<\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n <!-- Cancellation Policy Reference -->\r\n <div class=\"card\">\r\n <h2 class=\"card-title\">\ud83d\udcdc Cancellation Policy<\/h2>\r\n <ul class=\"rules-list\">\r\n <li><strong>Free Cancellation:<\/strong> Up to 24 hours before your scheduled pickup time with a 100% refund.<\/li>\r\n <li><strong>Late Cancellation:<\/strong> Cancellations made within 24 hours of pickup are subject to a fee equal to 1 day's rental rate.<\/li>\r\n <li><strong>No-Show:<\/strong> Failure to pick up the vehicle without prior cancellation will result in forfeiting the full reservation amount.<\/li>\r\n <li><strong>Refund Timeline:<\/strong> Approved refunds are credited back to your original payment method within 5\u20137 business days.<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/main>\r\n\r\n <!-- Confirmation Modal -->\r\n <div class=\"modal\" id=\"confirmModal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-icon\">\u26a0\ufe0f<\/div>\r\n <h2>Are you sure?<\/h2>\r\n <p style=\"color: var(--text-muted); margin-top: 0.5rem;\">\r\n This action cannot be undone. Your reservation will be permanently cancelled and your refund request will be submitted.\r\n <\/p>\r\n <div class=\"modal-actions\">\r\n <button class=\"btn btn-secondary\" onclick=\"closeModal()\">Keep Booking<\/button>\r\n <button class=\"btn btn-danger\" onclick=\"executeCancellation()\">Confirm Cancel<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Footer -->\r\n <footer>\r\n <p>© 2026 DriveEase Rentals. All rights reserved.<\/p>\r\n <\/footer>\r\n\r\n <!-- Interactive JavaScript -->\r\n <script>\r\n \/\/ Simulated Booking Database for demo purposes\r\n const mockBookings = {\r\n \"DE-84920\": {\r\n name: \"Rahul Sharma\",\r\n carName: \"Family SUV\",\r\n pickup: \"2026-08-15\",\r\n returnDate: \"2026-08-18\",\r\n days: 3,\r\n location: \"City Center Station\",\r\n amountPaid: 19500\r\n },\r\n \"DE-10293\": {\r\n name: \"Priya Patel\",\r\n carName: \"Economy Sedan\",\r\n pickup: \"2026-08-20\",\r\n returnDate: \"2026-08-22\",\r\n days: 2,\r\n location: \"Downtown Airport\",\r\n amountPaid: 7000\r\n }\r\n };\r\n\r\n let currentActiveBooking = null;\r\n\r\n function handleLookup(event) {\r\n event.preventDefault();\r\n const idInput = document.getElementById('bookingId').value.trim().toUpperCase();\r\n \r\n \/\/ Check lookup ID in mock database, or fall back to dynamic default values\r\n const booking = mockBookings[idInput] || {\r\n name: \"Customer\",\r\n carName: \"Economy Sedan\",\r\n pickup: \"2026-08-25\",\r\n returnDate: \"2026-08-27\",\r\n days: 2,\r\n location: \"Downtown Airport\",\r\n amountPaid: 7000\r\n };\r\n\r\n currentActiveBooking = { id: idInput, ...booking };\r\n\r\n \/\/ Fill details into DOM\r\n document.getElementById('dispBookingId').textContent = idInput;\r\n document.getElementById('dispName').textContent = booking.name;\r\n document.getElementById('dispCarName').textContent = booking.carName;\r\n document.getElementById('dispPickup').textContent = booking.pickup;\r\n document.getElementById('dispReturn').textContent = `${booking.returnDate} (${booking.days} Days)`;\r\n document.getElementById('dispLocation').textContent = booking.location;\r\n \r\n \/\/ Format Currency\r\n const formattedPaid = `\u20b9${booking.amountPaid.toLocaleString('en-IN')}`;\r\n document.getElementById('dispPaid').textContent = formattedPaid;\r\n document.getElementById('dispFee').textContent = \"\u20b90\";\r\n document.getElementById('dispRefund').textContent = formattedPaid;\r\n\r\n \/\/ UI Transitions\r\n document.getElementById('lookupCard').style.display = 'none';\r\n document.getElementById('bookingDetails').style.display = 'block';\r\n }\r\n\r\n function resetLookup() {\r\n document.getElementById('bookingDetails').style.display = 'none';\r\n document.getElementById('lookupCard').style.display = 'block';\r\n document.getElementById('lookupForm').reset();\r\n currentActiveBooking = null;\r\n }\r\n\r\n function promptConfirmation(event) {\r\n event.preventDefault();\r\n document.getElementById('confirmModal').classList.add('active');\r\n }\r\n\r\n function closeModal() {\r\n document.getElementById('confirmModal').classList.remove('active');\r\n }\r\n\r\n function executeCancellation() {\r\n closeModal();\r\n const bookingId = currentActiveBooking ? currentActiveBooking.id : \"your booking\";\r\n \r\n alert(`Booking ${bookingId} has been successfully cancelled.\\n\\nA confirmation email and refund receipt have been sent.`);\r\n \r\n \/\/ Redirect or Reset back to initial state\r\n resetLookup();\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>DriveEase – Cancel Reservation \ud83d\ude98 DriveEase Our Fleet About Us Contact \ud83d\udd0d Find Your Booking Booking Reference ID Email or … <\/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-606","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/training25.persistenttechnology.in\/index.php?rest_route=\/wp\/v2\/pages\/606","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/training25.persistenttechnology.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/training25.persistenttechnology.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/training25.persistenttechnology.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/training25.persistenttechnology.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=606"}],"version-history":[{"count":7,"href":"https:\/\/training25.persistenttechnology.in\/index.php?rest_route=\/wp\/v2\/pages\/606\/revisions"}],"predecessor-version":[{"id":801,"href":"https:\/\/training25.persistenttechnology.in\/index.php?rest_route=\/wp\/v2\/pages\/606\/revisions\/801"}],"wp:attachment":[{"href":"https:\/\/training25.persistenttechnology.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}