{"id":247,"date":"2026-02-14T12:58:37","date_gmt":"2026-02-14T11:58:37","guid":{"rendered":"https:\/\/wonderlytravel.zerus.cloud\/?page_id=247"},"modified":"2026-02-14T12:58:37","modified_gmt":"2026-02-14T11:58:37","slug":"flight-booking-confirmation","status":"publish","type":"page","link":"https:\/\/wonderlytravel.zerus.cloud\/?page_id=247","title":{"rendered":"Flight Booking Confirmation"},"content":{"rendered":"\n<style>\n\/* Print Styles *\/\n@media print {\n    \/* Hide everything except confirmation *\/\n    body * {\n        visibility: hidden;\n    }\n    \n    .wonderly-confirmation-container,\n    .wonderly-confirmation-container * {\n        visibility: visible;\n    }\n    \n    .wonderly-confirmation-container {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n    }\n    \n    \/* Hide print button and navigation when printing *\/\n    .confirmation-actions,\n    .confirmation-next-steps,\n    #wpadminbar,\n    nav,\n    footer,\n    .site-header,\n    .site-footer {\n        display: none !important;\n    }\n    \n    \/* Better print layout *\/\n    .confirmation-success {\n        border: 2px solid #28a745;\n        page-break-after: avoid;\n    }\n    \n    .confirmation-details {\n        page-break-inside: avoid;\n    }\n}\n<\/style>\n\n<div class=\"wonderly-confirmation-container\" id=\"print-area\">\n    <div class=\"confirmation-success\">\n        <div class=\"icon\">\u2713<\/div>\n        <h2>Booking Confirmed!<\/h2>\n        <p>Thank you for your booking. Your confirmation has been sent to your email.<\/p>\n        <div class=\"booking-reference\">\n            <small>Booking Reference:<\/small><br>\n            <span id=\"booking-ref-display\">\n                <span style=\"color: #999;\">No reference provided<\/span>            <\/span>\n        <\/div>\n    <\/div>\n    \n    <div class=\"confirmation-details\" id=\"booking-details\">\n        <h3>Booking Details<\/h3>\n                    <div class=\"details-loading\">\n                <p>Loading booking details...<\/p>\n            <\/div>\n            <\/div>\n    \n    <div class=\"confirmation-actions\">\n        <a href=\"#\" onclick=\"goToSearch(); return false;\" class=\"btn btn-primary\">\n            Book Another Flight        <\/a>\n        <button onclick=\"window.print()\" class=\"btn btn-secondary\">\n            Print Confirmation        <\/button>\n    <\/div>\n    \n    <div class=\"confirmation-next-steps\">\n        <h3>What happens next?<\/h3>\n        <ol>\n            <li>Check your email for the booking confirmation<\/li>\n            <li>Complete payment (if not done already)<\/li>\n            <li>Check-in online 24 hours before your flight<\/li>\n            <li>Arrive at the airport 2-3 hours before departure<\/li>\n        <\/ol>\n    <\/div>\n<\/div>\n\n<script>\njQuery(document).ready(function($) {\n    const bookingRef = '';\n    \n    \/\/ Function to go back to search page\n    window.goToSearch = function() {\n        const searchUrl = wonderlyData.search_url || '\/';\n        window.location.href = searchUrl;\n    };\n    \n    if (!bookingRef) {\n        $('#booking-details').html('<p style=\"color: red;\">No booking reference provided in URL.<\/p>');\n        $('#booking-ref-display').html('<span style=\"color: red;\">Missing<\/span>');\n        return;\n    }\n    \n    \/\/ Check if details already loaded from server\n    const hasServerData = false;\n    \n    if (hasServerData) {\n        console.log('Booking details loaded from server');\n        \/\/ Details already shown, no need for AJAX\n        return;\n    }\n    \n    console.log('Loading booking details via AJAX for ref:', bookingRef);\n    \n    \/\/ Update the displayed reference\n    $('#booking-ref-display').text(bookingRef);\n    \n    \/\/ Load booking details via AJAX\n    $.ajax({\n        url: wonderlyData.ajax_url,\n        type: 'POST',\n        data: {\n            action: 'wonderly_get_booking',\n            nonce: wonderlyData.nonce,\n            booking_reference: bookingRef\n        },\n        success: function(response) {\n            console.log('AJAX response:', response);\n            if (response.success) {\n                displayBookingDetails(response.data);\n            } else {\n                $('#booking-details').html(\n                    '<p style=\"color: red;\">Could not load booking details: ' + \n                    (response.data ? response.data.message : 'Unknown error') + \n                    '<\/p>'\n                );\n            }\n        },\n        error: function(xhr, status, error) {\n            console.error('AJAX error:', error);\n            $('#booking-details').html(\n                '<p style=\"color: red;\">Error loading booking details. Please contact support with reference: ' + \n                bookingRef + \n                '<\/p><p>Error: ' + error + '<\/p>'\n            );\n        }\n    });\n    \n    function displayBookingDetails(data) {\n        const booking = data.booking;\n        const flightData = JSON.parse(booking.flight_data);\n        let passengers = data.passengers;\n        \n        \/\/ Handle passenger data format\n        if (!passengers || passengers.length === 0) {\n            const passengerData = JSON.parse(booking.passenger_data);\n            if (passengerData.passengers) {\n                passengers = passengerData.passengers;\n            } else {\n                passengers = passengerData;\n            }\n        }\n        \n        const outbound = flightData.itineraries[0];\n        const firstSeg = outbound.segments[0];\n        const lastSeg = outbound.segments[outbound.segments.length - 1];\n        \n        let html = '<h3>Flight Details<\/h3>';\n        html += '<div class=\"detail-row\">';\n        html += '<span class=\"detail-label\">Route:<\/span>';\n        html += '<span class=\"detail-value\">' + firstSeg.departure.iataCode + ' \u2192 ' + lastSeg.arrival.iataCode + '<\/span>';\n        html += '<\/div>';\n        \n        html += '<div class=\"detail-row\">';\n        html += '<span class=\"detail-label\">Departure:<\/span>';\n        html += '<span class=\"detail-value\">' + formatDateTime(firstSeg.departure.at) + '<\/span>';\n        html += '<\/div>';\n        \n        html += '<div class=\"detail-row\">';\n        html += '<span class=\"detail-label\">Arrival:<\/span>';\n        html += '<span class=\"detail-value\">' + formatDateTime(lastSeg.arrival.at) + '<\/span>';\n        html += '<\/div>';\n        \n        html += '<div class=\"detail-row\">';\n        html += '<span class=\"detail-label\">Carrier:<\/span>';\n        html += '<span class=\"detail-value\">' + firstSeg.carrierCode + ' ' + firstSeg.number + '<\/span>';\n        html += '<\/div>';\n        \n        html += '<h3 style=\"margin-top: 30px;\">Passengers<\/h3>';\n        if (passengers && passengers.length > 0) {\n            passengers.forEach(function(pax, index) {\n                html += '<div class=\"detail-row\">';\n                html += '<span class=\"detail-label\">Passenger ' + (index + 1) + ':<\/span>';\n                html += '<span class=\"detail-value\">' + pax.first_name + ' ' + pax.last_name;\n                if (pax.date_of_birth) {\n                    html += ' (' + pax.date_of_birth + ')';\n                }\n                html += '<\/span>';\n                html += '<\/div>';\n            });\n        } else {\n            html += '<p>No passenger information available<\/p>';\n        }\n        \n        html += '<div class=\"detail-row\">';\n        html += '<span class=\"detail-label\">Total Price:<\/span>';\n        html += '<span class=\"detail-value\"><strong>' + formatPrice(booking.total_price, booking.currency) + '<\/strong><\/span>';\n        html += '<\/div>';\n        \n        html += '<div class=\"detail-row\">';\n        html += '<span class=\"detail-label\">Status:<\/span>';\n        html += '<span class=\"detail-value\">' + booking.status.toUpperCase() + '<\/span>';\n        html += '<\/div>';\n        \n        $('#booking-details').html(html);\n    }\n    \n    function formatDateTime(dateStr) {\n        const date = new Date(dateStr);\n        return date.toLocaleString('en-US', {\n            month: 'short',\n            day: 'numeric',\n            year: 'numeric',\n            hour: '2-digit',\n            minute: '2-digit'\n        });\n    }\n    \n    function formatPrice(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<\/script>\n\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-247","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wonderlytravel.zerus.cloud\/index.php?rest_route=\/wp\/v2\/pages\/247","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=247"}],"version-history":[{"count":1,"href":"https:\/\/wonderlytravel.zerus.cloud\/index.php?rest_route=\/wp\/v2\/pages\/247\/revisions"}],"predecessor-version":[{"id":248,"href":"https:\/\/wonderlytravel.zerus.cloud\/index.php?rest_route=\/wp\/v2\/pages\/247\/revisions\/248"}],"wp:attachment":[{"href":"https:\/\/wonderlytravel.zerus.cloud\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}