{"id":245,"date":"2026-02-14T12:57:54","date_gmt":"2026-02-14T11:57:54","guid":{"rendered":"https:\/\/wonderlytravel.zerus.cloud\/?page_id=245"},"modified":"2026-02-14T12:57:54","modified_gmt":"2026-02-14T11:57:54","slug":"flight-booking","status":"publish","type":"page","link":"https:\/\/wonderlytravel.zerus.cloud\/?page_id=245","title":{"rendered":"Flight Booking"},"content":{"rendered":"\n<div class=\"wonderly-booking-container\">\n    <div class=\"wonderly-booking-header\">\n        <h2>Complete Your Booking<\/h2>\n        <p>Please fill in passenger details to complete your booking<\/p>\n    <\/div>\n    \n    <!-- Flight Summary -->\n    <div class=\"wonderly-flight-summary\" id=\"flight-summary\">\n        <h3>Flight Summary<\/h3>\n        <div class=\"summary-loading\">\n            <p>Loading flight details...<\/p>\n        <\/div>\n    <\/div>\n    \n    <!-- Booking Form -->\n    <form id=\"wonderly-booking-form\" class=\"wonderly-form\">\n        \n        <!-- Contact Information -->\n        <div class=\"form-section\">\n            <h3>Contact Information<\/h3>\n            <div class=\"form-row\">\n                <div class=\"form-group\">\n                    <label for=\"contact_email\">Email Address *<\/label>\n                    <input type=\"email\" id=\"contact_email\" name=\"contact_email\" required \n                           placeholder=\"your@email.com\">\n                    <small>Booking confirmation will be sent to this email<\/small>\n                <\/div>\n                \n                <div class=\"form-group\">\n                    <label for=\"contact_phone\">Phone Number *<\/label>\n                    <input type=\"tel\" id=\"contact_phone\" name=\"contact_phone\" required \n                           placeholder=\"+213 555 123 456\">\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <!-- Passenger Information -->\n        <div class=\"form-section\">\n            <h3>Passenger Information<\/h3>\n            <div id=\"passengers-container\">\n                <!-- Passenger forms will be added here dynamically -->\n            <\/div>\n        <\/div>\n        \n        <!-- Special Requests -->\n        <div class=\"form-section\">\n            <h3>Special Requests <span class=\"optional\">(Optional)<\/span><\/h3>\n            <div class=\"form-group\">\n                <textarea id=\"special_requests\" name=\"special_requests\" rows=\"4\" \n                          placeholder=\"Meal preferences, wheelchair assistance, etc.\"><\/textarea>\n            <\/div>\n        <\/div>\n        \n        <!-- Terms and Conditions -->\n        <div class=\"form-section\">\n            <div class=\"wonderly-checkbox\">\n                <input type=\"checkbox\" id=\"accept_terms\" name=\"accept_terms\" required>\n                <label for=\"accept_terms\">\n                    I accept the \n                    <a href=\"#\" target=\"_blank\">Terms & Conditions<\/a> \n                    and \n                    <a href=\"#\" target=\"_blank\">Privacy Policy<\/a>\n                <\/label>\n            <\/div>\n        <\/div>\n        \n        <!-- Price Summary -->\n        <div class=\"wonderly-price-summary\">\n            <div class=\"price-row\">\n                <span>Flight Price:<\/span>\n                <span class=\"price-value\" id=\"flight-price\">-<\/span>\n            <\/div>\n            <div class=\"price-row total\">\n                <span>Total:<\/span>\n                <span class=\"price-value\" id=\"total-price\">-<\/span>\n            <\/div>\n        <\/div>\n        \n        <!-- Submit Buttons -->\n        <div class=\"form-actions\">\n            <a href=\"javascript:history.back()\" class=\"btn btn-secondary\">\n                \u2190 Back to Search            <\/a>\n            <button type=\"submit\" class=\"btn btn-primary\" id=\"submit-booking\">\n                Proceed to Payment \u2192            <\/button>\n        <\/div>\n    <\/form>\n    \n    <!-- Loading Overlay -->\n    <div class=\"wonderly-loading-overlay\" style=\"display: none;\">\n        <div class=\"spinner\"><\/div>\n        <p>Processing your booking...<\/p>\n    <\/div>\n<\/div>\n\n<script>\njQuery(document).ready(function($) {\n    const BookingForm = {\n        selectedFlight: null,\n        \n        init: function() {\n            this.loadSelectedFlight();\n            this.bindEvents();\n        },\n        \n        loadSelectedFlight: function() {\n            \/\/ Get flight data from sessionStorage\n            const flightData = sessionStorage.getItem('wonderly_selected_flight');\n            \n            if (!flightData) {\n                alert('No flight selected. Please go back and select a flight.');\n                if (wonderlyData.search_url) {\n                    window.location.href = wonderlyData.search_url;\n                } else {\n                    window.history.back();\n                }\n                return;\n            }\n            \n            this.selectedFlight = JSON.parse(flightData);\n            this.displayFlightSummary();\n            this.generatePassengerForms();\n            this.updatePriceSummary();\n        },\n        \n        displayFlightSummary: function() {\n            const flight = this.selectedFlight;\n            const outbound = flight.itineraries[0];\n            const firstSegment = outbound.segments[0];\n            const lastSegment = outbound.segments[outbound.segments.length - 1];\n            \n            const depTime = new Date(firstSegment.departure.at);\n            const arrTime = new Date(lastSegment.arrival.at);\n            \n            const html = `\n                <div class=\"flight-summary-card\">\n                    <div class=\"summary-route\">\n                        <div class=\"route-segment\">\n                            <div class=\"airport-code\">${firstSegment.departure.iataCode}<\/div>\n                            <div class=\"time\">${this.formatTime(depTime)}<\/div>\n                            <div class=\"date\">${this.formatDate(depTime)}<\/div>\n                        <\/div>\n                        <div class=\"route-arrow\">\u2192<\/div>\n                        <div class=\"route-segment\">\n                            <div class=\"airport-code\">${lastSegment.arrival.iataCode}<\/div>\n                            <div class=\"time\">${this.formatTime(arrTime)}<\/div>\n                            <div class=\"date\">${this.formatDate(arrTime)}<\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"summary-details\">\n                        <span>${firstSegment.carrierCode} ${firstSegment.number}<\/span>\n                        <span>${outbound.segments.length === 1 ? 'Non-stop' : (outbound.segments.length - 1) + ' stop(s)'}<\/span>\n                        <span>${this.formatDuration(outbound.duration)}<\/span>\n                    <\/div>\n                <\/div>\n            `;\n            \n            $('#flight-summary').html('<h3>Flight Summary<\/h3>' + html);\n        },\n        \n        generatePassengerForms: function() {\n            const container = $('#passengers-container');\n            container.empty();\n            \n            \/\/ Get passenger counts from sessionStorage or URL\n            const adults = parseInt(sessionStorage.getItem('wonderly_adults') || 1);\n            const children = parseInt(sessionStorage.getItem('wonderly_children') || 0);\n            const infants = parseInt(sessionStorage.getItem('wonderly_infants') || 0);\n            \n            let passengerIndex = 1;\n            \n            \/\/ Add adult forms\n            for (let i = 0; i < adults; i++) {\n                container.append(this.createPassengerForm(passengerIndex++, 'adult', i + 1));\n            }\n            \n            \/\/ Add children forms\n            for (let i = 0; i < children; i++) {\n                container.append(this.createPassengerForm(passengerIndex++, 'child', i + 1));\n            }\n            \n            \/\/ Add infant forms\n            for (let i = 0; i < infants; i++) {\n                container.append(this.createPassengerForm(passengerIndex++, 'infant', i + 1));\n            }\n        },\n        \n        createPassengerForm: function(index, type, typeIndex) {\n            const typeLabels = {\n                'adult': 'Adult',\n                'child': 'Child',\n                'infant': 'Infant'\n            };\n            \n            return `\n                <div class=\"passenger-form\" data-index=\"${index}\" data-type=\"${type}\">\n                    <h4>${typeLabels[type]} ${typeIndex}<\/h4>\n                    <div class=\"form-row\">\n                        <div class=\"form-group\">\n                            <label>First Name *<\/label>\n                            <input type=\"text\" name=\"passengers[${index}][first_name]\" required>\n                        <\/div>\n                        <div class=\"form-group\">\n                            <label>Last Name *<\/label>\n                            <input type=\"text\" name=\"passengers[${index}][last_name]\" required>\n                        <\/div>\n                    <\/div>\n                    <div class=\"form-row\">\n                        <div class=\"form-group\">\n                            <label>Date of Birth *<\/label>\n                            <input type=\"date\" name=\"passengers[${index}][date_of_birth]\" required max=\"${this.getMaxDate(type)}\">\n                        <\/div>\n                        <div class=\"form-group\">\n                            <label>Gender *<\/label>\n                            <select name=\"passengers[${index}][gender]\" required>\n                                <option value=\"\">Select<\/option>\n                                <option value=\"M\">Male<\/option>\n                                <option value=\"F\">Female<\/option>\n                            <\/select>\n                        <\/div>\n                    <\/div>\n                    <div class=\"form-row\">\n                        <div class=\"form-group\">\n                            <label>Passport Number<\/label>\n                            <input type=\"text\" name=\"passengers[${index}][passport_number]\">\n                        <\/div>\n                        <div class=\"form-group\">\n                            <label>Nationality<\/label>\n                            <select name=\"passengers[${index}][nationality]\">\n                                <option value=\"\">Select<\/option>\n                                <option value=\"DZ\">Algeria<\/option>\n                                <option value=\"FR\">France<\/option>\n                                <option value=\"US\">United States<\/option>\n                                <option value=\"GB\">United Kingdom<\/option>\n                            <\/select>\n                        <\/div>\n                    <\/div>\n                    <input type=\"hidden\" name=\"passengers[${index}][type]\" value=\"${type}\">\n                <\/div>\n            `;\n        },\n        \n        getMaxDate: function(type) {\n            const today = new Date();\n            if (type === 'adult') {\n                today.setFullYear(today.getFullYear() - 12);\n            } else if (type === 'child') {\n                today.setFullYear(today.getFullYear() - 2);\n            }\n            return today.toISOString().split('T')[0];\n        },\n        \n        updatePriceSummary: function() {\n            const flight = this.selectedFlight;\n            const price = this.formatPrice(flight.price.total, flight.price.currency);\n            \n            $('#flight-price').text(price);\n            $('#total-price').text(price);\n        },\n        \n        bindEvents: function() {\n            const self = this;\n            \n            $('#wonderly-booking-form').on('submit', function(e) {\n                e.preventDefault();\n                self.submitBooking();\n            });\n        },\n        \n        submitBooking: function() {\n            const form = $('#wonderly-booking-form');\n            const formData = new FormData(form[0]);\n            \n            \/\/ Prepare passengers data\n            const passengers = [];\n            $('.passenger-form').each(function() {\n                const index = $(this).data('index');\n                passengers.push({\n                    first_name: $(`input[name=\"passengers[${index}][first_name]\"]`).val(),\n                    last_name: $(`input[name=\"passengers[${index}][last_name]\"]`).val(),\n                    date_of_birth: $(`input[name=\"passengers[${index}][date_of_birth]\"]`).val(),\n                    gender: $(`select[name=\"passengers[${index}][gender]\"]`).val(),\n                    passport_number: $(`input[name=\"passengers[${index}][passport_number]\"]`).val(),\n                    nationality: $(`select[name=\"passengers[${index}][nationality]\"]`).val(),\n                    type: $(`input[name=\"passengers[${index}][type]\"]`).val()\n                });\n            });\n            \n            $('.wonderly-loading-overlay').fadeIn();\n            \n            $.ajax({\n                url: wonderlyData.ajax_url,\n                type: 'POST',\n                data: {\n                    action: 'wonderly_create_booking',\n                    nonce: wonderlyData.nonce,\n                    flight_data: JSON.stringify(this.selectedFlight),\n                    passengers: passengers,\n                    contact_email: $('#contact_email').val(),\n                    contact_phone: $('#contact_phone').val(),\n                    special_requests: $('#special_requests').val()\n                },\n                success: function(response) {\n                    $('.wonderly-loading-overlay').fadeOut();\n                    \n                    if (response.success) {\n                        \/\/ Store booking reference\n                        sessionStorage.setItem('wonderly_booking_reference', response.data.booking_reference);\n                        \n                        \/\/ Redirect to confirmation page\n                        const confirmationUrl = wonderlyData.confirmation_url || '\/booking-confirmation\/';\n                        \n                        \/\/ Check if URL already has query parameters\n                        const separator = confirmationUrl.indexOf('?') > -1 ? '&' : '?';\n                        \n                        window.location.href = confirmationUrl + separator + 'ref=' + response.data.booking_reference;\n                    } else {\n                        alert(response.data.message);\n                    }\n                },\n                error: function() {\n                    $('.wonderly-loading-overlay').fadeOut();\n                    alert('An error occurred. Please try again.');\n                }\n            });\n        },\n        \n        formatTime: function(date) {\n            return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });\n        },\n        \n        formatDate: function(date) {\n            return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });\n        },\n        \n        formatDuration: function(duration) {\n            const matches = duration.match(\/PT(\\d+H)?(\\d+M)?\/);\n            let hours = 0;\n            let minutes = 0;\n            if (matches[1]) hours = parseInt(matches[1]);\n            if (matches[2]) minutes = parseInt(matches[2]);\n            return `${hours}h ${minutes}m`;\n        },\n        \n        formatPrice: function(amount, currency) {\n            const price = parseFloat(amount);\n            if (currency === 'DZD') {\n                return price.toLocaleString('fr-FR', {\n                    minimumFractionDigits: 2,\n                    maximumFractionDigits: 2\n                }) + ' DZD';\n            }\n            return currency + ' ' + price.toFixed(2);\n        }\n    };\n    \n    BookingForm.init();\n});\n<\/script>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-245","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wonderlytravel.zerus.cloud\/index.php?rest_route=\/wp\/v2\/pages\/245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wonderlytravel.zerus.cloud\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wonderlytravel.zerus.cloud\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wonderlytravel.zerus.cloud\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wonderlytravel.zerus.cloud\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=245"}],"version-history":[{"count":1,"href":"https:\/\/wonderlytravel.zerus.cloud\/index.php?rest_route=\/wp\/v2\/pages\/245\/revisions"}],"predecessor-version":[{"id":246,"href":"https:\/\/wonderlytravel.zerus.cloud\/index.php?rest_route=\/wp\/v2\/pages\/245\/revisions\/246"}],"wp:attachment":[{"href":"https:\/\/wonderlytravel.zerus.cloud\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}