{"id":679,"date":"2026-04-23T15:12:55","date_gmt":"2026-04-23T15:12:55","guid":{"rendered":"https:\/\/alhana-alzahabyah.com\/Bostan\/?page_id=679"},"modified":"2026-04-23T18:19:48","modified_gmt":"2026-04-23T18:19:48","slug":"booking","status":"publish","type":"page","link":"https:\/\/alhana-alzahabyah.com\/Bostan\/booking\/","title":{"rendered":"Booking"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"679\" class=\"elementor elementor-679\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cec1465 e-flex e-con-boxed e-con e-parent\" data-id=\"cec1465\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-9579655 e-con-full e-flex e-con e-child\" data-id=\"9579655\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fb72629 elementor-widget elementor-widget-heading\" data-id=\"fb72629\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">Step 1<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b2f5fb6 elementor-widget-divider--view-line_icon elementor-widget-divider--element-align-right elementor-widget__width-initial elementor-hidden-mobile elementor-view-default elementor-widget elementor-widget-divider\" data-id=\"b2f5fb6\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon elementor-divider__element\">\n\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-circle\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\"><\/path><\/svg><\/div>\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1148946 elementor-widget elementor-widget-heading\" data-id=\"1148946\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Select Your Vehicle<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b9e1be9 elementor-widget elementor-widget-shortcode\" data-id=\"b9e1be9\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">[booking_car_summary]<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-889ff64 e-flex e-con-boxed e-con e-parent\" data-id=\"889ff64\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1039391 elementor-widget elementor-widget-html\" data-id=\"1039391\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyD468ql2HSohuFs3LyS0DZh8eSinHA4XQQ&amp;libraries=places\"><\/script>\n\n<div class=\"custom-booking-form\">\n    \n    <div id=\"popup-overlay\" class=\"overlay-bg\" style=\"display: none !important;\"><\/div>\n    \n    <div id=\"booking-success-popup\" class=\"popup-box\" style=\"display: none !important;\">\n        <div style=\"font-size: 60px; margin-bottom: 20px;\">\u2705<\/div>\n        <h2>Thank You!<\/h2>\n        <p>Your booking request and documents have been securely submitted. We will contact you shortly.<\/p>\n    <\/div>\n\n    <div id=\"map-modal-overlay\" class=\"overlay-bg\" style=\"display: none !important;\"><\/div>\n    \n    <div id=\"map-modal\" class=\"popup-box map-popup\" style=\"display: none !important;\">\n        <h3 style=\"margin-top:0;\">Select Location<\/h3>\n        <input id=\"map-search-box\" type=\"text\" placeholder=\"Search for a place or click on the map...\">\n        <div id=\"map-canvas\"><\/div>\n        <p id=\"selected-address-text\" style=\"font-size:13px; font-weight:bold; color:#D62D38; min-height:20px; margin-bottom: 15px;\"><\/p>\n        <div style=\"display:flex; gap:10px;\">\n            <button type=\"button\" class=\"black-btn\" id=\"confirm-map-btn\">Confirm Location<\/button>\n            <button type=\"button\" class=\"black-btn\" style=\"background:#888;\" id=\"cancel-map-btn\">Cancel<\/button>\n        <\/div>\n    <\/div>\n\n    <form id=\"car-booking-form\" enctype=\"multipart\/form-data\">\n        \n        <div class=\"form-step\">\n            <div class=\"step-header\">\n                <span class=\"step-num\">Step 2 <span class=\"line\"><\/span><\/span>\n                <h2>Choose Rental Duration<\/h2>\n            <\/div>\n            <div class=\"duration-options\">\n                <label class=\"radio-pill active\">\n                    <input type=\"radio\" name=\"duration\" value=\"Weekly\" checked> Weekly\n                <\/label>\n                <label class=\"radio-pill\">\n                    <input type=\"radio\" name=\"duration\" value=\"Monthly\"> Monthly\n                <\/label>\n                <label class=\"radio-pill\">\n                    <input type=\"radio\" name=\"duration\" value=\"Yearly\"> Yearly\n                <\/label>\n            <\/div>\n        <\/div>\n\n        <div class=\"form-step\">\n            <div class=\"step-header\">\n                <span class=\"step-num\">Trip Details <span class=\"line\"><\/span><\/span>\n                <h2>Dates & Locations<\/h2>\n            <\/div>\n            <div class=\"input-grid\">\n                <input type=\"text\" id=\"pickup_location\" name=\"pickup_location\" placeholder=\"\ud83d\udccd Pick-up Location\" readonly required style=\"cursor:pointer; background: #fff !important;\">\n                <input type=\"text\" id=\"dropoff_location\" name=\"dropoff_location\" placeholder=\"\ud83d\udccd Drop-off Location\" readonly required style=\"cursor:pointer; background: #fff !important;\">\n                \n                <input type=\"date\" id=\"start_date\" name=\"start_date\" required>\n                <input type=\"date\" id=\"end_date\" name=\"end_date\" required>\n            <\/div>\n            <p style=\"font-size:12px; color:#666; margin-top:10px;\">Click the location fields to drop a pin on the map.<\/p>\n        <\/div>\n\n        <div class=\"form-step\">\n            <div class=\"step-header\">\n                <span class=\"step-num\">Step 4 <span class=\"line\"><\/span><\/span>\n                <h2>Choose Your Insurance Plan<\/h2>\n            <\/div>\n            <div class=\"insurance-cards\">\n                <div class=\"ins-card active\">\n                    <h3>Full Insurance<\/h3>\n                    <p class=\"ins-bold\">Insurance rate calculated based on vehicle.<\/p>\n                    <button type=\"button\" class=\"black-btn\">SELECTED<\/button>\n                    <input type=\"radio\" name=\"insurance\" value=\"Full\" checked hidden>\n                <\/div>\n                <div class=\"ins-card\">\n                    <h3>Standard Insurance<\/h3>\n                    <p class=\"ins-bold\">No extra daily cost.<\/p>\n                    <button type=\"button\" class=\"black-btn\">SELECT<\/button>\n                    <input type=\"radio\" name=\"insurance\" value=\"Standard\" hidden>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"form-step\">\n            <div class=\"step-header\">\n                <span class=\"step-num\">Step 5 <span class=\"line\"><\/span><\/span>\n                <h2>Upload Your Documents<\/h2>\n            <\/div>\n            <div class=\"upload-grid\">\n                <label class=\"upload-box half-width\">\n                    <div class=\"upload-info\">\n                        <span class=\"icon\">\ud83e\udeaa<\/span>\n                        <span class=\"file-name\">ID \/ Passport<\/span>\n                    <\/div>\n                    <input type=\"file\" name=\"id_passport\" hidden class=\"file-upload-input\">\n                <\/label>\n                <label class=\"upload-box half-width\">\n                    <div class=\"upload-info\">\n                        <span class=\"icon\">\ud83e\udeaa<\/span>\n                        <span class=\"file-name\">Driving License<\/span>\n                    <\/div>\n                    <input type=\"file\" name=\"driving_license\" hidden class=\"file-upload-input\">\n                <\/label>\n                <label class=\"upload-box full-width\">\n                    <div class=\"upload-info\">\n                        <span class=\"icon\">\ud83d\udcdc<\/span>\n                        <span class=\"file-name\">Residence Contract <span class=\"optional\">(optional)<\/span><\/span>\n                    <\/div>\n                    <div class=\"black-btn small\">UPLOAD<\/div>\n                    <input type=\"file\" name=\"residence\" hidden class=\"file-upload-input\">\n                <\/label>\n            <\/div>\n        <\/div>\n\n        <div class=\"form-step centered-header\">\n            <div class=\"step-header center\">\n                <span class=\"step-num\"><span class=\"line before\"><\/span> Step 6 <span class=\"line\"><\/span><\/span>\n                <h2>Personal Information<\/h2>\n            <\/div>\n            <div class=\"input-grid\">\n                <input type=\"text\" name=\"first_name\" placeholder=\"First Name\" required>\n                <input type=\"tel\" name=\"phone\" placeholder=\"Phone\" required>\n                <input type=\"text\" name=\"age_confirmation\" placeholder=\"Age confirmation (21+)\" required>\n                <input type=\"email\" name=\"email\" placeholder=\"Email\" required>\n            <\/div>\n        <\/div>\n\n        <div class=\"form-step\">\n            <div class=\"step-header\">\n                <span class=\"step-num\">Step 7 <span class=\"line\"><\/span><\/span>\n                <h2>Choose Payment Method<\/h2>\n            <\/div>\n            <div class=\"payment-options\">\n                <label class=\"payment-pill active\">\n                    <input type=\"radio\" name=\"payment\" value=\"Online\" checked>\n                    <span class=\"radio-circle\"><\/span> Online Payment\n                <\/label>\n                <label class=\"payment-pill\">\n                    <input type=\"radio\" name=\"payment\" value=\"Visa\">\n                    <span class=\"radio-circle\"><\/span> Visa\n                <\/label>\n                <label class=\"payment-pill\">\n                    <input type=\"radio\" name=\"payment\" value=\"Cash\">\n                    <span class=\"radio-circle\"><\/span> Cash on delivery\n                <\/label>\n            <\/div>\n        <\/div>\n\n        <div class=\"form-step centered-header\">\n            <div class=\"step-header center\">\n                <span class=\"step-num\"><span class=\"line before\"><\/span> Summary <span class=\"line\"><\/span><\/span>\n                <h2>Your Booking Summary<\/h2>\n            <\/div>\n            <div class=\"input-grid\">\n                <input type=\"text\" id=\"sum-insurance\" value=\"Full Insurance\" readonly class=\"readonly-input\">\n                <input type=\"text\" id=\"sum-duration\" value=\"Weekly\" readonly class=\"readonly-input\">\n                <input type=\"text\" id=\"sum-payment\" value=\"Online Payment\" readonly class=\"readonly-input\">\n                <input type=\"text\" id=\"sum-total\" value=\"Estimated Total Calculated Below\" readonly class=\"readonly-input\">\n            <\/div>\n        <\/div>\n\n        <div class=\"submit-card-section\">\n            <div class=\"submit-card\">\n                <h2>Confirm Your Booking<\/h2>\n                <button type=\"submit\" class=\"final-submit-btn\" id=\"submit-btn-text\">Confirm & Book Now<\/button>\n            <\/div>\n        <\/div>\n\n    <\/form>\n<\/div>\n\n<style>\n\/* Styling Core - Kept Exactly as Provided *\/\n.custom-booking-form { font-family: sans-serif; max-width: 1000px; margin: 0 auto; color: #000; }\n.form-step { margin-bottom: 50px; }\n.step-header { margin-bottom: 25px; }\n.step-header.center { text-align: center; }\n.step-num { color: #D62D38; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 1px; }\n.line { width: 30px; height: 1px; background: #D62D38; display: inline-block; }\n.line.before { width: 30px; }\n.step-header h2 { font-size: 28px; font-weight: 800; margin: 5px 0 0 0; }\n.duration-options { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 20px; }\n.radio-pill { flex: 1; min-width: 120px; text-align: center; padding: 15px; background: #D62D38; color: white; border-radius: 30px; font-weight: 600; cursor: pointer; transition: 0.3s; opacity: 0.8; }\n.radio-pill.active { opacity: 1; box-shadow: 0 4px 10px rgba(214,45,56,0.3); }\n.insurance-cards { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }\n.ins-card { flex: 1; min-width: 280px; background: linear-gradient(135deg, #f8f0f0 0%, #e0d0d0 100%); padding: 30px; border-radius: 15px; cursor: pointer; transition: 0.3s; display: flex; flex-direction: column; }\n.ins-card.active { background: linear-gradient(135deg, #F5D0D0 0%, #e8caca 100%); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }\n.ins-card h3 { margin: 0 0 15px 0; font-size: 22px; font-weight: 800; }\n.ins-bold { font-weight: 800; font-size: 14px; margin-bottom: 10px; }\n.black-btn { background: #0a0a0a; color: white; border: none; padding: 15px; border-radius: 8px; font-weight: bold; width: 100%; cursor: pointer; text-transform: uppercase; }\n.upload-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.upload-box { border: 1px solid #D62D38; background: #FFF5F5; padding: 20px 30px; border-radius: 20px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: 0.2s; }\n.half-width { flex: 1; min-width: 250px; }\n.full-width { width: 100%; }\n.upload-info { display: flex; align-items: center; gap: 15px; font-weight: 500; font-size: 16px; }\n.icon { font-size: 32px; color: #000; }\n.optional { color: #aaa; font-weight: normal; font-size: 14px; }\n.black-btn.small { padding: 12px 35px; width: auto; font-size: 14px; border-radius: 30px; }\n.input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }\n.input-grid input { border: 1px solid #555; background: #fff; padding: 0 20px; height: 56px; border-radius: 10px; font-size: 15px; outline: none; transition: 0.2s; color: #000; width: 100%; box-sizing: border-box; font-family: sans-serif; }\n.input-grid input:focus { border-color: #D62D38; }\n.readonly-input { background: #fdfdfd !important; cursor: default; font-weight: 600; color: #D62D38 !important; }\n\ninput[type=\"date\"], input[type=\"month\"] { -webkit-appearance: none; appearance: none; }\ninput[type=\"date\"]::-webkit-calendar-picker-indicator, input[type=\"month\"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; transition: 0.2s; }\ninput[type=\"date\"]::-webkit-calendar-picker-indicator:hover, input[type=\"month\"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }\n\n.payment-options { display: flex; gap: 20px; flex-wrap: wrap; }\n.payment-pill { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 12px; border: 1px solid #555; background: #fff; padding: 15px 25px; border-radius: 40px; cursor: pointer; font-weight: 500; font-size: 18px; color: #D62D38; transition: 0.3s; height: 56px; box-sizing: border-box; }\n.payment-pill.active { background: #D62D38; color: white; border-color: #D62D38; }\n.radio-circle { width: 22px; height: 22px; border-radius: 50%; background: #D62D38; display: inline-block; position: relative; transition: 0.3s; flex-shrink: 0; }\n.payment-pill.active .radio-circle { background: #ffffff; }\n\n.submit-card-section { width: 100%; margin-top: 60px; margin-bottom: 60px; display: flex; justify-content: center; }\n.submit-card { width: 100%; background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%); border-radius: 40px; padding: 60px 20px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.1); }\n.submit-card h2 { margin: 0 0 30px 0; font-size: 32px; font-weight: 800; color: #000; }\n.final-submit-btn { background-color: #D62D38; color: #ffffff; border: none; border-radius: 40px; padding: 18px 50px; font-weight: 800; font-size: 18px; cursor: pointer; transition: all 0.3s ease; }\n.final-submit-btn:hover { background-color: #A01D27; box-shadow: 0 5px 15px rgba(214,45,56,0.25); }\n.final-submit-btn:disabled { background-color: #888; cursor: not-allowed; box-shadow: none; }\n\n\/* POPUP AND MAP FIXES *\/\n.overlay-bg { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:9998; backdrop-filter: blur(4px); }\n.popup-box { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; padding:40px; border-radius:20px; box-shadow:0 20px 50px rgba(0,0,0,0.3); z-index:9999; width: 90%; max-width: 500px; text-align: center; }\n.map-popup { max-width: 600px; text-align: left; padding: 30px; }\n#map-search-box { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 8px; font-size: 14px; box-sizing: border-box; height: 45px; }\n#map-canvas { height: 300px; width: 100%; background: #e0e0e0; border-radius: 8px; margin-bottom: 15px; }\n\n@media (max-width: 768px) { .input-grid { grid-template-columns: 1fr; } .upload-box { flex-direction: column; gap: 15px; align-items: flex-start; } .upload-box .black-btn { width: 100%; text-align: center; } .submit-card { padding: 40px 15px; } }\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    \n    \/\/ --- 1. DYNAMIC DATES, DURATIONS & UI LOGIC ---\n    function updateDynamicSummary() {\n        const durationInput = document.querySelector('input[name=\"duration\"]:checked');\n        const insuranceInput = document.querySelector('input[name=\"insurance\"]:checked');\n        const paymentInput = document.querySelector('input[name=\"payment\"]:checked');\n        \n        if(durationInput && insuranceInput && paymentInput) {\n            const duration = durationInput.value;\n            const insurance = insuranceInput.value;\n            const payment = paymentInput.value;\n\n            document.getElementById('sum-duration').value = duration;\n            document.getElementById('sum-insurance').value = insurance + \" Insurance\";\n            document.getElementById('sum-payment').value = payment + (payment === 'Visa' ? '' : (payment === 'Cash' ? ' on Delivery' : ' Payment'));\n        }\n    }\n\n    \/\/ Duration Radios\n    document.querySelectorAll('input[name=\"duration\"]').forEach(radio => {\n        radio.addEventListener('change', function() {\n            const container = this.closest('.duration-options');\n            container.querySelectorAll('.radio-pill').forEach(lbl => lbl.classList.remove('active'));\n            this.closest('.radio-pill').classList.add('active');\n            \n            const startDate = document.getElementById('start_date');\n            const endDate = document.getElementById('end_date');\n            \n            if (this.value === 'Monthly') {\n                startDate.type = 'month';\n                endDate.type = 'month';\n            } else {\n                startDate.type = 'date';\n                endDate.type = 'date';\n            }\n            updateDynamicSummary();\n        });\n    });\n\n    \/\/ Payment Radios\n    document.querySelectorAll('input[name=\"payment\"]').forEach(radio => {\n        radio.addEventListener('change', function() {\n            const container = this.closest('.payment-options');\n            container.querySelectorAll('.payment-pill').forEach(lbl => lbl.classList.remove('active'));\n            this.closest('.payment-pill').classList.add('active');\n            updateDynamicSummary();\n        });\n    });\n\n    \/\/ Insurance Cards\n    document.querySelectorAll('.ins-card').forEach(card => {\n        card.addEventListener('click', function() {\n            const container = this.closest('.insurance-cards');\n            container.querySelectorAll('.ins-card').forEach(c => {\n                c.classList.remove('active');\n                c.querySelector('.black-btn').innerText = 'SELECT';\n            });\n            this.classList.add('active');\n            this.querySelector('.black-btn').innerText = 'SELECTED';\n            this.querySelector('input[type=\"radio\"]').checked = true;\n            updateDynamicSummary();\n        });\n    });\n\n    \/\/ File Uploads\n    document.querySelectorAll('.file-upload-input').forEach(input => {\n        input.addEventListener('change', function() {\n            if (this.files && this.files[0]) {\n                const fileNameSpan = this.closest('.upload-box').querySelector('.file-name');\n                fileNameSpan.innerHTML = '<span style=\"color:#D62D38;\">\u2714 ' + this.files[0].name + '<\/span>';\n            }\n        });\n    });\n\n    \/\/ Initial Summary Call\n    updateDynamicSummary();\n\n\n    \/\/ --- 2. GOOGLE MAPS LOGIC ---\n    let map, marker, geocoder, autocomplete;\n    let currentTargetInputId = '';\n    let selectedAddress = '';\n\n    function initMap() {\n        const defaultLoc = { lat: 30.0444, lng: 31.2357 };\n        \n        map = new google.maps.Map(document.getElementById(\"map-canvas\"), {\n            center: defaultLoc,\n            zoom: 12,\n            mapTypeControl: false,\n            streetViewControl: false,\n        });\n        \n        marker = new google.maps.Marker({\n            map: map,\n            draggable: true,\n            animation: google.maps.Animation.DROP,\n            position: defaultLoc\n        });\n        \n        geocoder = new google.maps.Geocoder();\n        const input = document.getElementById(\"map-search-box\");\n        autocomplete = new google.maps.places.Autocomplete(input);\n        autocomplete.bindTo(\"bounds\", map);\n\n        autocomplete.addListener(\"place_changed\", () => {\n            const place = autocomplete.getPlace();\n            if (!place.geometry || !place.geometry.location) return;\n            map.setCenter(place.geometry.location);\n            map.setZoom(15);\n            marker.setPosition(place.geometry.location);\n            selectedAddress = place.formatted_address || place.name;\n            document.getElementById('selected-address-text').innerText = \"Selected: \" + selectedAddress;\n        });\n\n        marker.addListener('dragend', function() { geocodePosition(marker.getPosition()); });\n        map.addListener('click', function(e) {\n            marker.setPosition(e.latLng);\n            geocodePosition(e.latLng);\n        });\n    }\n\n    function geocodePosition(pos) {\n        \/\/ Show a loading text so the user knows it's thinking\n        document.getElementById('selected-address-text').innerText = \"Fetching address...\";\n        \n        \/\/ Use the modern 'location' parameter\n        geocoder.geocode({ location: pos }, function(responses, status) {\n            if (status === 'OK' && responses && responses.length > 0) {\n                \/\/ Success: Grab the formatted text address\n                selectedAddress = responses[0].formatted_address;\n                document.getElementById('selected-address-text').innerText = \"Selected: \" + selectedAddress;\n            } else {\n                \/\/ If the Geocoding API fails or isn't enabled, log the error so you can see it\n                console.warn('Geocoding failed because: ' + status);\n                \n                \/\/ Fallback: Paste the exact GPS coordinates instead of \"Unknown Location\"\n                selectedAddress = pos.lat().toFixed(5) + \", \" + pos.lng().toFixed(5);\n                document.getElementById('selected-address-text').innerText = \"Selected: Coordinates (\" + selectedAddress + \")\";\n            }\n        });\n    }\n    function openMapModal(inputId) {\n        currentTargetInputId = inputId;\n        \n        if (typeof google === 'undefined' || typeof google.maps === 'undefined') {\n            alert(\"Google Maps failed to load. Please ensure your API key is correctly added.\");\n            return;\n        }\n\n        document.getElementById('map-modal-overlay').style.setProperty('display', 'block', 'important');\n        document.getElementById('map-modal').style.setProperty('display', 'block', 'important');\n        document.getElementById('selected-address-text').innerText = '';\n        document.getElementById('map-search-box').value = '';\n        \n        if(!map) {\n            initMap();\n        } else {\n            google.maps.event.trigger(map, \"resize\");\n            map.setCenter(marker.getPosition());\n        }\n    }\n\n    function closeMapModal() {\n        document.getElementById('map-modal-overlay').style.setProperty('display', 'none', 'important');\n        document.getElementById('map-modal').style.setProperty('display', 'none', 'important');\n    }\n\n    \/\/ Attach Map Listeners\n    document.getElementById('pickup_location').addEventListener('click', () => openMapModal('pickup_location'));\n    document.getElementById('dropoff_location').addEventListener('click', () => openMapModal('dropoff_location'));\n    document.getElementById('cancel-map-btn').addEventListener('click', closeMapModal);\n    \n    document.getElementById('confirm-map-btn').addEventListener('click', () => {\n        if(selectedAddress) {\n            document.getElementById(currentTargetInputId).value = selectedAddress;\n        }\n        closeMapModal();\n    });\n\n\n    \/\/ --- AUTO-FILL FROM URL PARAMS ---\n    (function autofillFromUrl() {\n        const params = new URLSearchParams(window.location.search);\n\n        const pickup = params.get('pickup_location') || params.get('pickup');\n        const dropoff = params.get('dropoff_location') || params.get('dropoff');\n        const start = params.get('start_date');\n        const end = params.get('end_date');\n\n        const pickupInput = document.getElementById('pickup_location');\n        const dropoffInput = document.getElementById('dropoff_location');\n        const startInput = document.getElementById('start_date');\n        const endInput = document.getElementById('end_date');\n\n        if (pickup && pickupInput) pickupInput.value = pickup;\n        if (dropoff && dropoffInput) dropoffInput.value = dropoff;\n        if (start && startInput) startInput.value = start;\n        if (end && endInput) endInput.value = end;\n    })();\n\n\n    \/\/ --- 3. AJAX FORM SUBMISSION ---\n    document.getElementById('car-booking-form').addEventListener('submit', function(e) {\n        e.preventDefault(); \n        \n        const btn = document.getElementById('submit-btn-text');\n        btn.innerText = \"Sending Securely...\";\n        btn.disabled = true;\n\n        const formData = new FormData(this);\n        formData.append('action', 'process_custom_booking'); \n\n        const urlParams = new URLSearchParams(window.location.search);\n        if(urlParams.has('car_id')) { formData.append('car_id', urlParams.get('car_id')); }\n\n        fetch('\/Bostan\/wp-admin\/admin-ajax.php', {\n            method: 'POST',\n            body: formData\n        })\n        .then(response => response.json())\n        .then(data => {\n            if(data.success) {\n                document.getElementById('popup-overlay').style.setProperty('display', 'block', 'important');\n                document.getElementById('booking-success-popup').style.setProperty('display', 'block', 'important');\n                \n                setTimeout(() => {\n                    document.getElementById('popup-overlay').style.setProperty('display', 'none', 'important');\n                    document.getElementById('booking-success-popup').style.setProperty('display', 'none', 'important');\n                    btn.innerText = \"Confirm & Book Now\";\n                    btn.disabled = false;\n                    document.getElementById('car-booking-form').reset();\n                    updateDynamicSummary(); \n                }, 5000);\n            } else {\n                alert(\"Error: \" + (data.data || \"The server blocked the request.\"));\n                btn.innerText = \"Confirm & Book Now\";\n                btn.disabled = false;\n            }\n        })\n        .catch(error => {\n            console.error('Error:', error);\n            alert(\"An error occurred. Please check your connection.\");\n            btn.innerText = \"Confirm & Book Now\";\n            btn.disabled = false;\n        });\n    });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-729d923 e-flex e-con-boxed e-con e-parent\" data-id=\"729d923\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cb1723c elementor-widget elementor-widget-heading\" data-id=\"cb1723c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Before You Confirm<\/h2>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-74c083d e-con-full e-flex e-con e-child\" data-id=\"74c083d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5fb0e0b elementor-widget elementor-widget-image\" data-id=\"5fb0e0b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/alhana-alzahabyah.com\/Bostan\/wp-content\/uploads\/2026\/04\/Frame-14724.webp\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e317d46 elementor-widget elementor-widget-image\" data-id=\"e317d46\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/alhana-alzahabyah.com\/Bostan\/wp-content\/uploads\/2026\/04\/Frame-14725.webp\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\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>Step 1 Select Your Vehicle [booking_car_summary] \u2705 Thank You! Your booking request and documents have been securely submitted. We will [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-679","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/alhana-alzahabyah.com\/Bostan\/wp-json\/wp\/v2\/pages\/679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alhana-alzahabyah.com\/Bostan\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alhana-alzahabyah.com\/Bostan\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alhana-alzahabyah.com\/Bostan\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alhana-alzahabyah.com\/Bostan\/wp-json\/wp\/v2\/comments?post=679"}],"version-history":[{"count":55,"href":"https:\/\/alhana-alzahabyah.com\/Bostan\/wp-json\/wp\/v2\/pages\/679\/revisions"}],"predecessor-version":[{"id":921,"href":"https:\/\/alhana-alzahabyah.com\/Bostan\/wp-json\/wp\/v2\/pages\/679\/revisions\/921"}],"wp:attachment":[{"href":"https:\/\/alhana-alzahabyah.com\/Bostan\/wp-json\/wp\/v2\/media?parent=679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}