{"id":9107,"date":"2025-09-18T16:30:28","date_gmt":"2025-09-18T16:30:28","guid":{"rendered":"https:\/\/joodland.com\/?page_id=9107"},"modified":"2025-11-02T20:04:26","modified_gmt":"2025-11-02T20:04:26","slug":"flight-booking","status":"publish","type":"page","link":"https:\/\/joodland.com\/en\/flight-booking\/","title":{"rendered":"Flight Booking"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9107\" class=\"elementor elementor-9107\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4f82b25 e-flex e-con-boxed e-con e-parent\" data-id=\"4f82b25\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-701daa9 elementor-widget elementor-widget-html\" data-id=\"701daa9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  \/* * All styles are scoped to #flight-widget to prevent conflicts. *\/\r\n  #flight-widget {\r\n    \/* CSS Variables *\/\r\n    --brand: #e67e22;\r\n    --text: #333;\r\n    --muted: #777;\r\n    --line: #eaeaea;\r\n    --bg: #fff;\r\n    --shadow: 0 10px 30px rgba(0, 0, 0, .08);\r\n    --radius: 18px;\r\n    \r\n    \/* Box & Layout Styles *\/\r\n    direction: ltr; \/* Changed to LTR *\/\r\n    background: var(--bg);\r\n    max-width: 980px;\r\n    margin: 32px auto;\r\n    padding: 28px 22px;\r\n    border-radius: var(--radius);\r\n    box-shadow: var(--shadow);\r\n    font-family: 'Tajawal', sans-serif;\r\n    box-sizing: border-box; \r\n    text-align: left; \/* Adjusted for LTR *\/\r\n  }\r\n\r\n  \/* Reset box-sizing for all internal elements *\/\r\n  #flight-widget *, \r\n  #flight-widget *::before, \r\n  #flight-widget *::after {\r\n    box-sizing: inherit;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  #flight-widget h3 {\r\n    color: var(--brand);\r\n    font-size: 28px;\r\n    font-weight: 700;\r\n    text-align: center;\r\n    margin-bottom: 8px;\r\n  }\r\n\r\n  #flight-widget p {\r\n    color: var(--muted);\r\n    font-size: 13px;\r\n    text-align: center;\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  \/* Segmented Control (Tabs) *\/\r\n  #flight-widget .segmented {\r\n    display: inline-flex;\r\n    background: #fafafa;\r\n    border: 1px solid var(--line);\r\n    border-radius: 999px;\r\n    padding: 4px;\r\n    gap: 6px;\r\n    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .03);\r\n    margin: 0 auto 16px;\r\n    justify-content: center;\r\n    direction: ltr; \/* Ensure LTR direction for control *\/\r\n  }\r\n\r\n  #flight-widget .segmented button {\r\n    border: 0;\r\n    background: transparent;\r\n    color: #555;\r\n    padding: 8px 18px;\r\n    border-radius: 999px;\r\n    cursor: pointer;\r\n    font-weight: 700;\r\n    font-family: inherit;\r\n  }\r\n\r\n  #flight-widget .segmented button.active {\r\n    background: var(--brand);\r\n    color: #fff;\r\n    box-shadow: 0 6px 14px rgba(230, 126, 34, .35);\r\n  }\r\n\r\n  \/* Form Elements *\/\r\n  #flight-widget form {\r\n    display: block;\r\n  }\r\n\r\n  #flight-widget label {\r\n    display: block;\r\n    margin: 6px 2px 6px;\r\n    color: #444;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    text-align: left; \/* Adjusted for LTR *\/\r\n  }\r\n\r\n  #flight-widget input, \r\n  #flight-widget select, \r\n  #flight-widget textarea {\r\n    width: 100%;\r\n    padding: 12px;\r\n    border: 1px solid var(--line);\r\n    border-radius: 12px;\r\n    background: #fff;\r\n    color: var(--text);\r\n    font-size: 15px;\r\n    font-family: 'Tajawal', sans-serif;\r\n    text-align: left; \/* Adjusted for LTR *\/\r\n    direction: ltr;\r\n  }\r\n\r\n  #flight-widget textarea {\r\n    resize: none;\r\n  }\r\n\r\n  \/* Grid Layouts *\/\r\n  #flight-widget .grid-2 {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 14px;\r\n  }\r\n\r\n  #flight-widget .grid-4 {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 14px;\r\n  }\r\n\r\n  @media(max-width:900px){\r\n    #flight-widget .grid-4 {\r\n      grid-template-columns: repeat(2, 1fr);\r\n    }\r\n  }\r\n\r\n  @media(max-width:560px){\r\n    #flight-widget .grid-2, \r\n    #flight-widget .grid-4 {\r\n      grid-template-columns: 1fr;\r\n    }\r\n  }\r\n\r\n  \/* Range Slider & Bubble Fix *\/\r\n  #flight-widget .range-container {\r\n      position: relative;\r\n      margin-top: 36px; \/* Space for the bubble above *\/\r\n  }\r\n\r\n  #flight-widget .range {\r\n    position: relative;\r\n  }\r\n\r\n  #flight-widget .range input[type=range] {\r\n    -webkit-appearance: none;\r\n    width: 100%;\r\n    height: 7px;\r\n    background: #eee;\r\n    border-radius: 999px;\r\n    outline: none;\r\n    position: relative; \r\n    top: auto;\r\n    margin-top: 4px; \/* Space between bubble and slider track *\/\r\n  }\r\n\r\n  #flight-widget .range input[type=range]::-webkit-slider-thumb {\r\n    -webkit-appearance: none;\r\n    width: 18px;\r\n    height: 18px;\r\n    border-radius: 50%;\r\n    background: var(--brand);\r\n    cursor: pointer;\r\n    border: none;\r\n    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);\r\n  }\r\n\r\n  #flight-widget .bubble {\r\n    position: absolute;\r\n    top: -34px; \/* Position above the input track *\/\r\n    transform: translateX(-50%); \/* Center the bubble (for LTR) *\/\r\n    background: #fff;\r\n    border: 1px solid var(--line);\r\n    border-radius: 10px;\r\n    padding: 4px 10px;\r\n    font-weight: 700;\r\n    font-size: 13px;\r\n    color: #333;\r\n    box-shadow: 0 4px 10px rgba(0, 0, 0, .06);\r\n    line-height: 1.2;\r\n    z-index: 10;\r\n  }\r\n\r\n  \/* CTA Button *\/\r\n  #flight-widget .cta {\r\n    display: flex;\r\n    gap: 10px;\r\n    flex-wrap: wrap;\r\n    margin-top: 16px;\r\n    justify-content: center;\r\n  }\r\n\r\n  #flight-widget .btn-brand {\r\n    flex: 1;\r\n    min-width: 260px;\r\n    padding: 14px 18px;\r\n    border: 0;\r\n    border-radius: 12px;\r\n    background: var(--brand);\r\n    color: #fff;\r\n    font-size: 16px;\r\n    font-weight: 800;\r\n    cursor: pointer;\r\n    transition: .25s;\r\n    font-family: inherit;\r\n  }\r\n\r\n  #flight-widget .btn-brand:hover {\r\n    filter: brightness(.92);\r\n    box-shadow: 0 10px 20px rgba(230, 126, 34, .35);\r\n  }\r\n\r\n  \/* Separator *\/\r\n  #flight-widget .section {\r\n    padding: 14px 0;\r\n    border-top: 1px solid var(--line);\r\n    margin-top: 10px;\r\n  }\r\n<\/style>\r\n\r\n<div id=\"flight-widget\">\r\n  <h3>Flight Booking Request<\/h3>\r\n  <p>Select your flight details and send them directly to us via WhatsApp.<\/p>\r\n\r\n  <div class=\"segmented\">\r\n    <button type=\"button\" class=\"tab active\" data-target=\"rt\">Round Trip<\/button>\r\n    <button type=\"button\" class=\"tab\" data-target=\"ow\">One Way<\/button>\r\n  <\/div>\r\n\r\n  <form id=\"flightFormEnglish\" novalidate>\r\n    <div class=\"grid-2\">\r\n      <div><label for=\"name\">Full Name<\/label><input id=\"name\" type=\"text\" placeholder=\"Example: John Doe\" required><\/div>\r\n      <div><label for=\"phone\">Phone Number<\/label><input id=\"phone\" type=\"tel\" placeholder=\"+964 7xx xxx xxxx\" required><\/div>\r\n    <\/div>\r\n\r\n    <div id=\"pane-rt\" class=\"section\">\r\n      <div class=\"grid-4\">\r\n        <div><label for=\"fromRT\">From (Departure)<\/label><input id=\"fromRT\" list=\"airports\" placeholder=\"Search airport...\" required><\/div>\r\n        <div><label for=\"toRT\">To (Arrival)<\/label><input id=\"toRT\" list=\"airports\" placeholder=\"Search airport...\" required><\/div>\r\n        <div><label for=\"goRT\">Departure Date<\/label><input id=\"goRT\" type=\"date\" required><\/div>\r\n        <div><label for=\"backRT\">Return Date<\/label><input id=\"backRT\" type=\"date\" required><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"pane-ow\" class=\"section\" style=\"display:none;\">\r\n      <div class=\"grid-4\">\r\n        <div><label for=\"fromOW\">From (Departure)<\/label><input id=\"fromOW\" list=\"airports\" placeholder=\"Search airport...\"><\/div>\r\n        <div><label for=\"toOW\">To (Arrival)<\/label><input id=\"toOW\" list=\"airports\" placeholder=\"Search airport...\"><\/div>\r\n        <div><label for=\"goOW\">Departure Date<\/label><input id=\"goOW\" type=\"date\"><\/div>\r\n        <div><label>Return Date<\/label><input type=\"text\" value=\"\u2014 One Way \u2014\" disabled><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"section\">\r\n      <div class=\"grid-2\">\r\n        <div class=\"range-container\">\r\n          <label>Adults<\/label>\r\n          <div class=\"range\">\r\n            <input id=\"adults\" type=\"range\" min=\"1\" max=\"9\" value=\"1\">\r\n            <div class=\"bubble\" id=\"adultsB\">1<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"range-container\">\r\n          <label>Children<\/label>\r\n          <div class=\"range\">\r\n            <input id=\"children\" type=\"range\" min=\"0\" max=\"8\" value=\"0\">\r\n            <div class=\"bubble\" id=\"childrenB\">0<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      \r\n      <div class=\"grid-2\" style=\"margin-top:8px;\">\r\n        <div><label for=\"class\">Travel Class<\/label><select id=\"class\" required><option value=\"\">Select<\/option><option>Economy<\/option><option>Business<\/option><option>First<\/option><\/select><\/div>\r\n        <div><label for=\"visa\">Visa Status<\/label><select id=\"visa\" required><option value=\"\">Select<\/option><option>I have a visa<\/option><option>I need a visa<\/option><\/select><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"section\"><label for=\"notes\">Notes<\/label><textarea id=\"notes\" rows=\"3\" placeholder=\"Seat preferences, preferred route\/airline, etc.\"><\/textarea><\/div>\r\n\r\n    <div class=\"cta\"><button type=\"button\" class=\"btn-brand\" id=\"sendWA\">Send Details via WhatsApp<\/button><\/div>\r\n  <\/form>\r\n\r\n  <datalist id=\"airports\">\r\n    <option value=\"Baghdad (BGW)\"><option value=\"Basra (BSR)\"><option value=\"Najaf (NJF)\">\r\n    <option value=\"Erbil (EBL)\"><option value=\"Sulaymaniyah (ISU)\">\r\n    <option value=\"Istanbul (IST)\"><option value=\"Sabiha Istanbul (SAW)\"><option value=\"Ankara (ESB)\"><option value=\"Trabzon (TZX)\"><option value=\"Antalya (AYT)\">\r\n  <\/datalist>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    \/\/ Scope the script to the widget\r\n    const widget = document.getElementById('flight-widget');\r\n    if (!widget) return;\r\n\r\n    \/\/ Tabs functionality\r\n    const tabs = widget.querySelectorAll('.tab');\r\n    const paneRT = widget.querySelector('#pane-rt');\r\n    const paneOW = widget.querySelector('#pane-ow');\r\n    tabs.forEach(btn => {\r\n        btn.addEventListener('click', () => {\r\n            tabs.forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            paneRT.style.display = btn.dataset.target === 'rt' ? 'block' : 'none';\r\n            paneOW.style.display = btn.dataset.target === 'ow' ? 'block' : 'none';\r\n            \r\n            \/\/ Update required attributes based on active tab\r\n            try {\r\n                const isRT = btn.dataset.target === 'rt';\r\n                widget.querySelector('#fromRT').required = isRT;\r\n                widget.querySelector('#toRT').required = isRT;\r\n                widget.querySelector('#goRT').required = isRT;\r\n                widget.querySelector('#backRT').required = isRT;\r\n                \r\n                widget.querySelector('#fromOW').required = !isRT;\r\n                widget.querySelector('#toOW').required = !isRT;\r\n                widget.querySelector('#goOW').required = !isRT;\r\n            } catch (e) {\r\n                console.error(\"Error setting required attributes:\", e);\r\n            }\r\n        });\r\n    });\r\n\r\n    \/\/ Range Slider Bubble functionality\r\n    function setBubble(range, bubble) {\r\n        const val = +range.value, min = +range.min, max = +range.max;\r\n        const percent = ((val - min) * 100) \/ (max - min);\r\n        bubble.textContent = val;\r\n        \/\/ Calculation for LTR centering\r\n        const offset = percent * 0.15; \r\n        bubble.style.left = `calc(${percent}% - (${10}px + ${offset}px))`;\r\n    }\r\n    \r\n    const rAdults = widget.querySelector('#adults');\r\n    const rChildren = widget.querySelector('#children');\r\n    const bAdults = widget.querySelector('#adultsB');\r\n    const bChildren = widget.querySelector('#childrenB');\r\n    \r\n    [rAdults, rChildren].forEach((r, i) => {\r\n        const b = i === 0 ? bAdults : bChildren;\r\n        setBubble(r, b); \r\n        r.addEventListener('input', () => setBubble(r, b));\r\n    });\r\n\r\n    \/\/ WhatsApp Send Button\r\n    widget.querySelector('#sendWA').addEventListener('click', () => {\r\n        const nameInput = widget.querySelector('#name');\r\n        const phoneInput = widget.querySelector('#phone');\r\n        const name = nameInput.value.trim();\r\n        const phone = phoneInput.value.trim();\r\n        const form = widget.querySelector('#flightFormEnglish');\r\n\r\n        \/\/ Check form validity\r\n        if (!form.checkValidity()) {\r\n            alert('Please complete all required fields correctly.');\r\n            form.reportValidity();\r\n            return;\r\n        }\r\n\r\n        const isRT = widget.querySelector('.tab.active').dataset.target === 'rt';\r\n        let from, to, go, back = '\u2014', tripType;\r\n\r\n        if (isRT) {\r\n            from = widget.querySelector('#fromRT').value;\r\n            to = widget.querySelector('#toRT').value;\r\n            go = widget.querySelector('#goRT').value;\r\n            back = widget.querySelector('#backRT').value;\r\n            tripType = 'Round Trip';\r\n        } else {\r\n            from = widget.querySelector('#fromOW').value;\r\n            to = widget.querySelector('#toOW').value;\r\n            go = widget.querySelector('#goOW').value;\r\n            tripType = 'One Way';\r\n        }\r\n\r\n        const adt = widget.querySelector('#adults').value;\r\n        const chd = widget.querySelector('#children').value;\r\n        const klass = widget.querySelector('#class').value || '\u2014';\r\n        const visa = widget.querySelector('#visa').value || '\u2014';\r\n        const notes = (widget.querySelector('#notes').value || '').trim();\r\n\r\n        const msg =\r\n            `*Flight Booking Request (EN):*%0A` +\r\n            `*Name:* ${name}%0A` +\r\n            `*Phone:* ${phone}%0A` +\r\n            `*Trip Type:* ${tripType}%0A` +\r\n            `*From:* ${from}%0A` +\r\n            `*To:* ${to}%0A` +\r\n            `*Departure Date:* ${go}%0A` +\r\n            `*Return Date:* ${back}%0A` +\r\n            `*Adults:* ${adt}%0A` +\r\n            `*Children:* ${chd}%0A` +\r\n            `*Travel Class:* ${klass}%0A` +\r\n            `*Visa Status:* ${visa}%0A` +\r\n            `*Notes:* ${notes || '\u2014'}`;\r\n\r\n        window.open(`https:\/\/api.whatsapp.com\/send?phone=9647775558577&text=${msg}`, '_blank');\r\n    });\r\n    \r\n    \/\/ Initial bubble positioning\r\n    setBubble(rAdults, bAdults);\r\n    setBubble(rChildren, bChildren);\r\n});\r\n<\/script>\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>Flight Booking Request Select your flight details and send them directly to us via WhatsApp. Round Trip One Way Full Name Phone Number From (Departure) To (Arrival) Departure Date Return Date From (Departure) To (Arrival) Departure Date Return Date Adults 1 Children 0 Travel ClassSelectEconomyBusinessFirst Visa StatusSelectI have a visaI need a visa Notes Send [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-9107","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/joodland.com\/en\/wp-json\/wp\/v2\/pages\/9107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joodland.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/joodland.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/joodland.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/joodland.com\/en\/wp-json\/wp\/v2\/comments?post=9107"}],"version-history":[{"count":15,"href":"https:\/\/joodland.com\/en\/wp-json\/wp\/v2\/pages\/9107\/revisions"}],"predecessor-version":[{"id":9866,"href":"https:\/\/joodland.com\/en\/wp-json\/wp\/v2\/pages\/9107\/revisions\/9866"}],"wp:attachment":[{"href":"https:\/\/joodland.com\/en\/wp-json\/wp\/v2\/media?parent=9107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}