{"id":1064,"date":"2024-09-30T08:34:59","date_gmt":"2024-09-30T08:34:59","guid":{"rendered":"https:\/\/eticketing.my\/seatview\/"},"modified":"2024-12-27T04:03:17","modified_gmt":"2024-12-27T04:03:17","slug":"seatview","status":"publish","type":"page","link":"https:\/\/eticketing.my\/ms\/seatview\/","title":{"rendered":"Trip List"},"content":{"rendered":"<head>\r\n        <style>\r\n         \/* Custom Animation for Expanding Trip Card *\/\r\n        .trip-card {\r\n            transition: all 0.5s ease-out;\r\n            height: 100px; \/* Initial collapsed height *\/\r\n        }\r\n\r\n        .trip-card.expanded {\r\n            height: auto; \/* Height when expanded *\/\r\n        }\r\n\r\n        .trip-card .additional-info {\r\n            opacity: 0;\r\n            transition: opacity 0.5s ease-out;\r\n        }\r\n\r\n        .trip-card.expanded .additional-info {\r\n            opacity: 1;\r\n        }\r\n\r\n        .trip-card:focus-within {\r\n            box-shadow: 0 0 10px rgba(251, 146, 60, 1);\r\n            transition: box-shadow 0.3s ease;\r\n        }       \r\n            \r\n        .date-box {\r\n            transition: transform 0.2s ease-in-out;\r\n            flex: 1; \/* Makes all date boxes equal width *\/\r\n            min-width: 60px; \/* Minimum width to avoid shrinking too much *\/\r\n            max-width: 200px; \/* Maximum width to prevent stretching *\/\r\n            padding: 6px 8px; \/* Smaller padding *\/\r\n            text-align: center; \/* Center align text *\/\r\n            display: flex;\r\n            flex-direction: column; \/* Stack text vertically *\/\r\n            justify-content: center; \/* Vertically center *\/\r\n            align-items: center; \/* Horizontally center *\/\r\n            line-height: 1.2; \/* Reduce line spacing *\/\r\n        }\r\n        .date-box:hover {\r\n            transform: scale(1.1);\r\n        }\r\n\r\n        .no-magnify {\r\n            transform: none !important;\r\n            transition: none !important;\r\n        }\r\n\r\n        \/* Styles for the dropdown container *\/\r\n        .dropdown-container {\r\n        position: relative;\r\n        width: 100%;\r\n        }\r\n\r\n        \/* Dropdown list styling *\/\r\n        .dropdown-list {\r\n        display: none;\r\n        position: absolute;\r\n        top: 100%;\r\n        left: 0;\r\n        width: 100%;\r\n        max-height: 240px;\r\n        \/* Show max 5 items in the box *\/\r\n        overflow-y: auto;\r\n        border: 1px solid #ddd;\r\n        background-color: white;\r\n        border-radius: 0.375rem;\r\n        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n        z-index: 10;\r\n        }\r\n\r\n        \/* Indent only the text in the dropdown items (not the hover effect) *\/\r\n        .dropdown-item {\r\n        padding: 8px 12px;\r\n        cursor: pointer;\r\n        transition: background-color 0.3s;\r\n        font-size: smaller;\r\n        }\r\n\r\n        .dropdown-item:hover {\r\n        background-color: #f3f4f6;\r\n        }\r\n\r\n        \/* Text indentation inside the dropdown item *\/\r\n        .dropdown-item span {\r\n        margin-left: 20px;\r\n        \/* Indentation for the text *\/\r\n        }\r\n\r\n        \/* No results styling *\/\r\n        .no-results {\r\n        padding: 8px 12px;\r\n        color: #6B7280;\r\n        font-style: italic;\r\n        }\r\n\r\n        \/* Selected value display *\/\r\n        .selected-value {\r\n        font-weight: bold;\r\n        }\r\n\r\n        \/* Genre optgroup styles (no indentation) *\/\r\n        .dropdown-item.font-semibold {\r\n        margin-left: 0;\r\n        \/* No indentation for optgroup\/genre headings *\/\r\n        }\r\n\r\n        \/*End Custom DropDown *\/\r\n        <\/style>   \r\n    <\/head>\r\n    <body>    \r\n    \r\n    <!--Mobile Search Bar-->\r\n        <div id=\"mobileSearchBar\" class=\"md:hidden fixed top-12 left-0 w-full flex items-center bg-orange-400 text-white text-center p-2 rounded-b-lg transform transition-transform duration-500 ease-in-out\">\r\n                <div class=\"w-1\/6 justify-items-center\" onclick=\"window.location.href='\/'\">\r\n                    <i class=\"fa-solid fa-angle-left fa-xl\"><\/i>\r\n                <\/div>   \r\n                <div class=\"w-4\/6 grid justify-items-center\">\r\n                    <div class=\"rounded-lg flex items-start text-xs\">\r\n                        <p><\/p>                    \r\n                        \r\n                        <i class=\"fa-xs self-center px-1 fa-solid fa-arrow-right\"><\/i> \r\n                        \r\n                        <p><\/p>\r\n                    <\/div>      \r\n                    <div class=\"flex justify-center items-center gap-1 text-xs bg-gray-100 text-gray-800 px-2.5 py-0.5 rounded-full\">\r\n                        <p>22 April 2026<\/p> \r\n                        \r\n                    <\/div>  \r\n                <\/div>                   \r\n                <div id=\"modifySearchM\" class=\"w-1\/6 justify-items-center\">\r\n                    <i class=\"fa-solid fa-pen-to-square fa-xl\"><\/i>\r\n                <\/div>  \r\n            <\/div>\r\n\r\n       <!--End Mobile Search Bar-->\r\n    \r\n        <!-- Modal For Trip Error -->\r\n        <div id=\"tripErrorModal\" tabindex=\"-1\" class=\"hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-screen bg-black bg-opacity-90\" style=\"margin-block-start:0\">\r\n            <div class=\"relative p-4 w-full max-w-md max-h-full\">\r\n                <div id=\"tripModalContent\" class=\"relative bg-white rounded-lg shadow-sm border border-gray-100\">\r\n                    <button type=\"button\" onclick=\"closeTripModal()\" class=\"absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center\">\r\n                        <svg class=\"w-3 h-3\" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 14 14\">\r\n                            <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6\"\/>\r\n                        <\/svg>\r\n                        <span class=\"sr-only\">Close modal<\/span>\r\n                    <\/button>\r\n                    <div class=\"p-4 md:p-5 text-center\">                \r\n                        <i class=\"fa-regular fa-face-frown mx-auto mb-4 text-gray-400 w-12 h-12\"><\/i>\r\n                        <h3 class=\"mb-5 text-lg font-normal text-gray-500\">This trip cannot be retrieved<br> Please select another trip<\/h3>\r\n                        <button type=\"button\" onclick=\"closeTripModal()\" class=\"text-white bg-orange-400 hover:bg-orange-700 focus:ring-4 focus:outline-none focus:ring-orange-400 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center\">\r\n                            Select Another\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"hidden md:flex items-end gap-12\">\r\n            <a id=\"backtoHome\" class=\"w-1\/12 cursor-pointer border-0  border-none\" href=\"\/ms\/\"><i class=\"fa-regular fa-circle-left mr-1 fa-xl\"><\/i>Home<\/a>\r\n        \r\n            <form id=\"searchBar\" action=\"https:\/\/eticketing.my\/ms\/seatview\/\" method=\"get\" autocomplete=\"off\" class=\"hidden ease-in-out w-11\/12 focus:outline-none\" tabindex=\"0\" data-trp-original-action=\"https:\/\/eticketing.my\/ms\/seatview\/\">\r\n                <!--Form-->\r\n                <div class=\"flex gap-2\">\r\n                    <input type=\"hidden\" id=\"from\" name=\"from\" value=\"\">\r\n                    <input type=\"hidden\" id=\"to\" name=\"to\" value=\"\">\r\n                    <input type=\"hidden\" id=\"fromId\" name=\"fromId\" value=\"\">\r\n                    <input type=\"hidden\" id=\"toId\" name=\"toId\" value=\"\">\r\n\r\n                    <!-- From -->\r\n                    <div class=\"container\">\r\n                        <label class=\"block mb-2 text-sm font-semibold\">Dari<\/label>\r\n                        <div class=\"dropdown-container\">\r\n                            <input\r\n                            type=\"text\"\r\n                            id=\"departFromRe\"\r\n                            class=\"text-sm block w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-orange-400\"\r\n                            placeholder=\"Select From\"\r\n                            autocomplete=\"off\"\r\n                            required>\r\n\r\n                            <p id=\"departErrorRe\" class=\"mt-2 text-sm text-red-500 hidden\">Please select location<\/p>\r\n\r\n                            <!-- Dropdown List -->\r\n                            <div id=\"dropdownRe\" class=\"dropdown-list\" onclick=\"val('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjbGllbnRfaWQiOiI0OSIsInN1YiI6IjQxY2NjNGQ0LTY2NDQtNDMzZS1hMDQ4LTA4ZGRmZmM4MmMwYiIsInVzZXJfdHlwZSI6Ikd1ZXN0IiwiZGV2aWNlX2lkIjoiYjg5ZDAxNTYtNGE5MC00ZTJiLTg1OTUtMDhkZGZmYzgyYzE5IiwiaWF0IjoxNzc2Nzg5NDM0LCJleHAiOjE3NzY3OTAzMzQsImlzcyI6Imh0dHBzOi8vMTAuMjAuMjAxLjExOjEwNyIsImF1ZCI6Imh0dHBzOi8vMTAuMjAuMjAxLjExOjEwNyJ9.oTwHmDcHfcg1ZJH8tg-WDG4xL6Xma-3cjauKonjeXj4', true)\">\r\n                            <!-- Dynamic options will be injected here -->\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- To -->\r\n                    <div class=\"container\">\r\n                        <label class=\"block mb-2 text-sm font-semibold\">Ke<\/label>\r\n                        <div class=\"dropdown-container\">\r\n                            <input\r\n                            type=\"text\"\r\n                            id=\"departToRe\"\r\n                            class=\"text-sm block w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-orange-400\"\r\n                            placeholder=\"Select To\"\r\n                            autocomplete=\"off\"\r\n                            disabled\r\n required>\r\n\r\n                            <p id=\"returnErrorRe\" class=\"mt-2 text-sm text-red-500 hidden\">Please select location<\/p>\r\n\r\n                            <!-- Dropdown List -->\r\n                            <div id=\"dropdown2Re\" class=\"dropdown-list\">\r\n                            <!-- Dynamic options will be injected here -->\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Depart Date -->\r\n                    <div class=\"container\">\r\n                        <label class=\"block mb-2 text-sm font-semibold\">Tarikh Bertolak<\/label>\r\n                        <input\r\n                            type=\"date\"\r\n                            id=\"fromDateRe\"\r\n                            name=\"fromDateRe\"\r\n                            class=\"text-sm block w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-orange-400\"\r\n                            placeholder=\"Select Date\"\r\n                            autocomplete=\"off\">\r\n\r\n                        <p id=\"dateErrorRe\" class=\"mt-2 text-sm text-red-500 hidden\">Please select date<\/p>\r\n                    <\/div>\r\n\r\n                    <!-- Return Date -->\r\n                    <div class=\"container relative\">\r\n                        <label class=\"block mb-2 text-sm font-semibold\">Tarikh Kembali<\/label>\r\n                        <input\r\n                            type=\"date\"\r\n                            name=\"toDateRe\"\r\n                            id=\"toDateRe\"\r\n                            class=\"text-sm block w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-orange-400\"\r\n                            placeholder=\"Pilih Tarikh (Tidak Wajib)\"\r\n                            autocomplete=\"off\" \/>\r\n                        <button\r\n                            type=\"button\"\r\n                            id=\"clearDateRe\"\r\n                            class=\"absolute right-3 top-[90%] -translate-y-1\/2 text-gray-500 hover:text-black text-lg hidden\"                \r\n                            onclick=\"document.getElementById(&quot;toDateRe&quot;).value = &quot;&quot;; document.getElementById(&quot;clearDateRe&quot;).classList.add(&quot;hidden&quot;)\"\r\n                        >\r\n                            \u2715\r\n                        <\/button>\r\n                    <\/div>\r\n\r\n                    <!-- Submit -->           \r\n                    <button type=\"submit\" name=\"searchRe\" value=\"Submit\" onclick=\"requerySearch(event);\" class=\"h-10 w-[70%] place-self-end mt-2 text-white bg-orange-400 hover:bg-orange-700 focus:ring-4 focus:outline-none focus:ring-orange-400 font-medium rounded-lg text-sm text-center content-center\">\r\n                        <i class=\"fa-solid fa-magnifying-glass\"><\/i> &nbsp; Cari\r\n                    <\/button>                \r\n                <\/div>\r\n                <!--End Form-->  \r\n            <input type=\"hidden\" name=\"trp-form-language\" value=\"ms\"\/><\/form>        \r\n        <\/div>\r\n     \r\n\r\n        <div class=\"flex\">\r\n            <!-- Bus Info & Filter (Left Side) -->\r\n            <div class=\"flex flex-col hidden md:block w-1\/3\">\r\n            <!-- Ticket -->\r\n                <div class=\"w-full bg-white bg-white border border-gray-200 rounded-lg shadow-md md:flex-row md:w-full\">\r\n                    <div class=\"flex justify-between\">\r\n                        <h5 class=\"px-4 pt-4 md:text-sm lg:text-lg font-semibold mb-4\"><i class=\"fa-solid fa-ticket\"><\/i> &nbsp;Tiket Anda<\/h5>\r\n                        <h7 class=\"px-4 pt-4 md:text-sm lg:text-lg font-semibold cursor-pointer text-orange-600\" onclick=\"changeTrip()\">Tukar Perjalanan<\/h7>\r\n                    <\/div>\r\n\r\n                    <div id=\"dashboardDepart\" class=\"relative p-4\">\r\n                        <div class=\"mb-4\">\r\n                            <label for=\"dateDashDepart\" class=\"block text-sm font-medium text-gray-700\">Bertolak<\/label>\r\n                            <p class=\"text-sm\">22 April 2026<\/p>\r\n                        <\/div>    \r\n                        \r\n                        <div class=\"mb-4\">\r\n                            <label for=\"timeDepart\" class=\"block text-sm font-medium text-gray-700\">Masa<\/label>\r\n                            <p class=\"text-sm\" id=\"timeDashDepart\">Tiada Dipilih<\/p>\r\n                        <\/div>\r\n\r\n                        <div class=\"mb-4\">\r\n                            <label for=\"seat\" class=\"block text-sm font-medium text-gray-700\">Tempat Duduk<\/label>\r\n                            <p class=\"text-sm\" id=\"seatDashDepart\">Tiada Dipilih<\/p>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"mb-4 flex block text-sm font-medium text-gray-700 space-x-2 justify-evenly\">                        \r\n                            <div class=\"w-12 hidden\" id=\"selectedDepartBusLogoContainer\">    \r\n                                <img decoding=\"async\" id=\"selectedDepartBusLogo\" src=\"..\/wp-content\/plugins\/eticketing-booking\/assets\/shared\/img\/no-connection.png\">\r\n                            <\/div>\r\n                            <div class=\"flex flex-col self-center\"\r\n                                <span id=\"selectedDepartBusOperator\">Tiada Bas Dipilih <\/span>\r\n                                <p id=\"selectedDepartBusTime\" class=\"text-sm\">  <\/p>\r\n                            <\/div>                       \r\n                        <\/div>\r\n\r\n                        <div class=\"w-auto rounded-lg flex flex-nowrap items-start\">\r\n                            <div class=\"flex-1 min-w-0  rounded text-center overflow-hidden break-words\">\r\n                                <label for=\"date\" class=\"block text-sm font-medium text-gray-900\">Dari<\/label>\r\n                                <p class=\"text-sm text-gray-500\"><\/p>\r\n                            <\/div>\r\n                            <i class=\"w-[10%]  text-center overflow-hidden break-words fa-solid fa-arrow-right\"><\/i>                          \r\n                            <div class=\"flex-1 min-w-0 b text-center overflow-hidden break-words\">\r\n                                 <label for=\"date\" class=\"block text-sm font-medium text-gray-900\">Destinasi<\/label>\r\n                                <p class=\"text-sm text-gray-500\"><\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"w-full text-center px-4 mt-4\">\r\n                            <button id=\"switchDepartTab\" onclick=\"switchToDepart()\" class=\"cursor-pointer py-2 bg-orange-400 text-white rounded-md w-full hidden\">Modify Depart Trip<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>  \r\n                \r\n                \r\n            <\/div>\r\n\r\n            <div id=\"searchTripPopupM\" class=\"fixed inset-0 z-40 bg-white transform translate-y-full transition-transform duration-300 ease-in-out md:hidden overflow-y-hidden\">\r\n                <div class=\"p-4 flex justify-between items-center border-b\">\r\n                    <h2 class=\"text-lg font-semibold\">Ubah Perjalanan<\/h2>\r\n                    <button id=\"closeTripPopupM\" class=\"text-4xl text-gray-500 hover:text-gray-800\">&times;<\/button>\r\n                <\/div>\r\n                <form id=\"searchBarM\" action=\"https:\/\/eticketing.my\/ms\/seatview\/\" method=\"get\" autocomplete=\"off\" data-trp-original-action=\"https:\/\/eticketing.my\/ms\/seatview\/\">\r\n                    <!--Form-->\r\n                    <div class=\"grid gap-2 p-6\">\r\n                        <input type=\"hidden\" id=\"from\" name=\"from\" value=\"\">\r\n                        <input type=\"hidden\" id=\"to\" name=\"to\" value=\"\">\r\n                        <input type=\"hidden\" id=\"fromId\" name=\"fromId\" value=\"\">\r\n                        <input type=\"hidden\" id=\"toId\" name=\"toId\" value=\"\">\r\n\r\n                        <!-- From -->\r\n                        <div class=\"container\">\r\n                            <label class=\"block mb-2 text-sm font-semibold\">Dari<\/label>\r\n                            <div class=\"dropdown-container\">\r\n                                <input\r\n                                type=\"text\"\r\n                                id=\"departFromReM\"\r\n                                class=\"text-sm block w-full px-4 py-2 text-gray-700 bg-white border rounded-md focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-orange-400\"\r\n                                placeholder=\"Select From\"\r\n                                autocomplete=\"off\"\r\n                                required>\r\n\r\n                                <p id=\"departErrorReM\" class=\"mt-2 text-sm text-red-500 hidden\">Please select location<\/p>\r\n\r\n                                <!-- Dropdown List -->\r\n                                <div id=\"dropdownReM\" class=\"dropdown-list\" onclick=\"val('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjbGllbnRfaWQiOiI0OSIsInN1YiI6IjQxY2NjNGQ0LTY2NDQtNDMzZS1hMDQ4LTA4ZGRmZmM4MmMwYiIsInVzZXJfdHlwZSI6Ikd1ZXN0IiwiZGV2aWNlX2lkIjoiYjg5ZDAxNTYtNGE5MC00ZTJiLTg1OTUtMDhkZGZmYzgyYzE5IiwiaWF0IjoxNzc2Nzg5NDM0LCJleHAiOjE3NzY3OTAzMzQsImlzcyI6Imh0dHBzOi8vMTAuMjAuMjAxLjExOjEwNyIsImF1ZCI6Imh0dHBzOi8vMTAuMjAuMjAxLjExOjEwNyJ9.oTwHmDcHfcg1ZJH8tg-WDG4xL6Xma-3cjauKonjeXj4', true)\">\r\n                                <!-- Dynamic options will be injected here -->\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <!-- To -->\r\n                        <div class=\"container\">\r\n                            <label class=\"block mb-2 text-sm font-semibold\">Ke<\/label>\r\n                            <div class=\"dropdown-container\">\r\n                                <input\r\n                                type=\"text\"\r\n                                id=\"departToReM\"\r\n                                class=\"text-sm block w-full px-4 py-2 text-gray-700 bg-white border rounded-md focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-orange-400\"\r\n                                placeholder=\"Select To\"\r\n                                autocomplete=\"off\"\r\n                                disabled\r\n required>\r\n\r\n                                <p id=\"returnErrorReM\" class=\"mt-2 text-sm text-red-500 hidden\">Please select location<\/p>\r\n\r\n                                <!-- Dropdown List -->\r\n                                <div id=\"dropdown2ReM\" class=\"dropdown-list\">\r\n                                <!-- Dynamic options will be injected here -->\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Depart Date -->\r\n                        <div class=\"container\">\r\n                        <label class=\"block mb-2 text-sm font-semibold\">Tarikh Bertolak<\/label>\r\n                        <input\r\n                            type=\"date\"\r\n                            id=\"fromDateReM\"\r\n                            name=\"fromDateReM\"\r\n                            class=\"text-sm block w-full px-4 py-2 text-gray-700 bg-white border rounded-md focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-orange-400\"\r\n                            placeholder=\"Select Date\"\r\n                            autocomplete=\"off\"\r\n                            onclick=\"removeDateErrorRe()\">\r\n\r\n                        <p id=\"dateErrorRe\" class=\"mt-2 text-sm text-red-500 hidden\">Please select date<\/p>\r\n                        <\/div>\r\n\r\n                        <!-- Return Date -->\r\n                        <div class=\"container\">\r\n                        <label class=\"block mb-2 text-sm font-semibold\">Tarikh Kembali<\/label>\r\n                        <input\r\n                            type=\"date\"\r\n                            name=\"toDateReM\"\r\n                            id=\"toDateReM\"\r\n                            class=\"text-sm block w-full px-4 py-2 text-gray-700 bg-white border rounded-md focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-orange-400\"\r\n                            placeholder=\"Pilih Tarikh (Tidak Wajib)\"\r\n                            autocomplete=\"off\" \/>\r\n                        <button\r\n                            type=\"button\"\r\n                            id=\"clearDateReM\"\r\n                            class=\"absolute right-8 top-[41%] -translate-y-1\/2 text-gray-500 hover:text-black text-lg hidden\"\r\n                            onclick=\"document.getElementById(&quot;toDateReM&quot;).value = &quot;&quot;; document.getElementById(&quot;clearDateReM&quot;).classList.add(&quot;hidden&quot;)\"\r\n                        >\r\n                            \u2715\r\n                        <\/button>\r\n\r\n                        <\/div>\r\n\r\n                        <!-- Submit -->\r\n                        <button type=\"submit\" class=\"bg-orange-400 w-full p-2 text-white bg-black  hover:bg-orange-700 focus:ring-4 focus:outline-none focus:ring-orange-400 font-medium rounded-lg text-sm text-center mt-2\" name=\"searchReM\" value=\"Submit\" onclick=\"requerySearch(event, true);\">\r\n                            <i class=\"fa-solid fa-magnifying-glass\"><\/i> &nbsp; Cari\r\n                        <\/button>                   \r\n                    <\/div>\r\n                    <!--End Form-->  \r\n                <input type=\"hidden\" name=\"trp-form-language\" value=\"ms\"\/><\/form>\r\n            <\/div>\r\n            \r\n            <!-- Filter Depart Mobile -->\r\n            <!-- Floating Button -->\r\n            <div class=\"flex fixed bottom-0 left-0 z-10 w-full divide-x-2\">\r\n                <button id=\"openFilterPopupBtn\" class=\"w-full  bg-orange-400 text-white p-4  rounded-tl-lg shadow-lg md:hidden\">\r\n                    Tapis\r\n                <\/button>\r\n                <button id=\"openSortPopupBtn\" class=\"w-full bottom-0 left-0 z-10 bg-orange-400 p-4 text-white  rounded-tr-lg shadow-lg md:hidden\">\r\n                    Susun\r\n                <\/button>   \r\n            <\/div>\r\n\r\n            <!-- Sort Button Depart -->\r\n            <div id=\"sortPopupDepart\" class=\"fixed inset-0 z-40 bg-white transform translate-y-full transition-transform duration-300 ease-in-out md:hidden overflow-y-auto\">\r\n                <div class=\"p-4 flex justify-between items-center border-b\">\r\n                    <h2 class=\"text-lg font-semibold\">Susun Perjalanan Bertolak<\/h2>\r\n                    <button id=\"closeSortBtnDepart\" class=\"text-4xl text-gray-500 hover:text-gray-800\">&times;<\/button>\r\n                <\/div>\r\n                <div class=\"p-4\">                 \r\n                    <div class=\"flex items-center mb-4\">\r\n                        <input checked id=\"earliestRadio\" type=\"radio\" value=\"time\" name=\"mobileSortTripD\" class=\"w-4 h-4 text-orange-600 bg-gray-100 border-gray-300 focus:ring-orange-500 focus:ring-2\">\r\n                        <label for=\"earliestRadio\" class=\"ms-2 text-sm font-medium text-gray-900\">Paling Cepat<\/label>\r\n                    <\/div>\r\n                    <div class=\"flex items-center mb-4\">\r\n                        <input id=\"cheapestRadio\" type=\"radio\" value=\"price\" name=\"mobileSortTripD\" class=\"w-4 h-4 text-orange-600 bg-gray-100 border-gray-300 focus:ring-orange-500 focus:ring-2\">\r\n                        <label for=\"cheapestRadio\" class=\"ms-2 text-sm font-medium text-gray-900\">Paling Murah<\/label>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Sort Button Return -->\r\n            <div id=\"sortPopupReturn\" class=\"fixed inset-0 z-40 bg-white transform translate-y-full transition-transform duration-300 ease-in-out md:hidden overflow-y-auto\">\r\n                <div class=\"p-4 flex justify-between items-center border-b\">\r\n                    <h2 class=\"text-lg font-semibold\">Susun Perjalanan Balik<\/h2>\r\n                    <button id=\"closeSortBtnReturn\" class=\"text-4xl text-gray-500 hover:text-gray-800\">&times;<\/button>\r\n                <\/div>\r\n                <div class=\"p-4\">                 \r\n                    <div class=\"flex items-center mb-4\">\r\n                        <input checked id=\"earliestRadio\" type=\"radio\" value=\"time\" name=\"mobileSortTripR\" class=\"w-4 h-4 text-orange-600 bg-gray-100 border-gray-300 focus:ring-orange-500 focus:ring-2\">\r\n                        <label for=\"earliestRadio\" class=\"ms-2 text-sm font-medium text-gray-900\">Paling Cepat<\/label>\r\n                    <\/div>\r\n                    <div class=\"flex items-center mb-4\">\r\n                        <input id=\"cheapestRadio\" type=\"radio\" value=\"price\" name=\"mobileSortTripR\" class=\"w-4 h-4 text-orange-600 bg-gray-100 border-gray-300 focus:ring-orange-500 focus:ring-2\">\r\n                        <label for=\"cheapestRadio\" class=\"ms-2 text-sm font-medium text-gray-900\">Paling Murah<\/label>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n\r\n            <!-- Filter Popup -->\r\n            <div id=\"filterPopupDepart\" class=\"fixed inset-0 z-40 bg-white transform translate-y-full transition-transform duration-300 ease-in-out md:hidden overflow-y-auto\">\r\n                <div class=\"p-4 flex justify-between items-center border-b\">\r\n                    <h2 class=\"text-lg font-semibold\">Tapis<\/h2>\r\n                    <button id=\"closeFilterPopupBtnDepart\" class=\"text-4xl text-gray-500 hover:text-gray-800\">&times;<\/button>\r\n                <\/div>\r\n                <div class=\"p-4\">\r\n                    <!-- Depart Time -->\r\n                    <div class=\"mb-4\">\r\n                        <label for=\"date\" class=\"mb-4 block text-sm font-medium text-gray-700\">Masa Bertolak<\/label>\r\n                        <div class=\"flex items-center mb-4\">\r\n                            <input id=\"timeMorningM\" type=\"checkbox\" value=\"morning\" onchange=\"filterTime(this, 3)\" class=\"w-4 h-4 text-orange-400 bg-gray-100 border-gray-300 rounded-sm focus:ring-orange-400 focus:ring-2\">\r\n                            <label for=\"timeMorningM\" class=\"ms-2 text-sm font-medium text-gray-900\"><i class=\"fa-solid fa-cloud-sun\" style=\"width: 20px\"><\/i> 12:00 AM - 11:59 AM<\/label>\r\n                        <\/div>\r\n                        <div class=\"flex items-center mb-4\">\r\n                            <input id=\"timeAfternoonM\" type=\"checkbox\" value=\"afternoon\" onchange=\"filterTime(this, 3)\" class=\"w-4 h-4 text-orange-400 bg-gray-100 border-gray-300 rounded-sm focus:ring-orange-400 focus:ring-2\">\r\n                            <label for=\"timeAfternoonM\" class=\"ms-2 text-sm font-medium text-gray-900\"><i class=\"fa-solid fa-sun\" style=\"width: 20px\"><\/i><\/i> 12:00 PM - 06:59 PM\r\n                        <\/div>\r\n                        <div class=\"flex items-center mb-4\">\r\n                            <input id=\"timeNightM\" type=\"checkbox\" value=\"night\" onchange=\"filterTime(this, 3)\" class=\"w-4 h-4 text-orange-400 bg-gray-100 border-gray-300 rounded-sm focus:ring-orange-400 focus:ring-2\">\r\n                            <label for=\"timeNightM\" class=\"ms-2 text-sm font-medium text-gray-900\"><i class=\"fa-solid fa-cloud-moon\" style=\"width: 20px\"><\/i> 07:00 PM - 11:59 PM\r\n                        <\/div>                  \r\n                    <\/div>\r\n\r\n                    <!-- Price Range Filter -->\r\n\r\n                    <div class=\"mb-4\">\r\n                        <label for=\"priceFilterM\" class=\"block text-sm font-medium text-gray-700\">Julat Harga<\/label>\r\n                        <input type=\"range\" id=\"priceFilterM\" min=\"\" max=\"\" step=\"0.1\" class=\"mt-1 w-full\" value=\"\" \r\n                            oninput=\"filterPrice(this.value, 3)\">\r\n                        <div class=\"flex justify-between text-sm\">\r\n                            <span>RM0.00<\/span>\r\n                            <span id=\"priceDisplayM\">RM0.00<\/span> <!-- Display current value -->\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Bus Filter -->\r\n                    <div class=\"mb-4\">\r\n                        <label class=\"mb-4 block text-sm font-medium text-gray-700\">Operator Bas<\/label>\r\n                        \r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- Bus Trip List Depart (Right Side) -->\r\n            <div id=\"tripListDepart\" class=\"flex-1 md:px-6 pt-[10%] md:pt-0\">   \r\n                <!--Slider New -->\r\n                    <div class=\"flex justify-center items-center bg-gray-100 hidden md:block\">\r\n        <div class=\"flex items-center gap-4 bg-white p-4 rounded-lg shadow-lg w-full max-w-4xl justify-center\">\r\n            <!-- Left Arrow -->\r\n            <button onclick=\"prevDate()\" class=\"text-gray-600 hover:text-gray-900 transition text-xl cursor-pointer\">\r\n                <i class=\"fas fa-chevron-left\"><\/i>\r\n            <\/button>\r\n            \r\n            <!-- Date Boxes -->\r\n            <div id=\"dateContainer\" class=\"flex gap-2 flex-grow justify-center w-full\">22-04-2026<\/div>\r\n    \r\n            <!-- Right Arrow -->\r\n            <button onclick=\"nextDate()\" class=\"text-gray-600 hover:text-gray-900 transition text-xl cursor-pointer\">\r\n                <i class=\"fas fa-chevron-right\"><\/i>\r\n            <\/button>\r\n        <\/div>\r\n    <\/div>\r\n                <!--End New Slider-->\r\n                <div class=\"flex justify-between mt-7 mb-2\"> \r\n                        <select id=\"sortingTripDepart\" class=\"hidden md:block bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5\">\r\n                            <option value=\"time\" selected>Earliest Time<\/option>\r\n                            <option value=\"price\">Cheapest Price<\/option>\r\n                        <\/select> \r\n                    <h4 class=\"text-sm md:text-xl font-semibold mb-4\">Showing <span id=\"totalDepartResult\">5<\/span> of 5 depart trips<\/h4>\r\n                <\/div>          \r\n                \r\n                    <div class=\"justify-items-center\">\r\n                        <div class=\"grid g-2 w-72 md:w-96 place-self-center justify-items-center\">\r\n                            <img decoding=\"async\" src=\"..\/wp-content\/plugins\/eticketing-booking\/assets\/shared\/img\/no-data.png\">\r\n                            <p class=\"h3\">Trip Unavailable <\/p>\r\n                        <\/div>                           \r\n                    <\/div>\r\n                            \r\n                         \r\n            <\/div>            \r\n\r\n            <!-- Popup Mobile View -->\r\n            <div id=\"mobilePopupDepart\" class=\"fixed hidden inset-0 z-20 flex overflow-y-auto bg-white\" style=\"z-index: 99;\">\r\n                <div class=\"p-6 rounded w-full relative\">\r\n                    <div class=\"fixed top-0 left-0 grid w-full bg-gray-200 bg-opacity-100 text-gray-500 hover:text-red-500 font-bold p-3 z-10 rounded-b-2xl\">\r\n                        <div class=\"flex justify-between\">\r\n                            <span>Sila pilih tempat duduk<\/span>\r\n                            <button id=\"closePopupBtn\" class=\"text-4xl\">&times;<\/button>\r\n                        <\/div>\r\n                        <div class=\"flex gap-2 justify-center text-xs mt-2\">\r\n                                <div class=\"flex items-center\">\r\n                                <svg width=\"20\" height=\"15\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect width=\"20\" height=\"15\" fill=\"red\" rx=\"5\" ry=\"5\"><\/rect><\/svg>\r\n                                <span style=\"align-item:center\">&nbsp;Diduduki<\/span>\r\n                                <\/div>\r\n                                <div class=\"flex items-center\">\r\n                                <svg width=\"20\" height=\"15\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect width=\"20\" height=\"15\" fill=\"grey\" rx=\"5\" ry=\"5\"><\/rect><\/svg>\r\n                                <span style=\"align-item:center\">&nbsp;Ada<\/span>\r\n                                <\/div>\r\n                                <div class=\"flex items-center\">\r\n                                <svg width=\"20\" height=\"15\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect width=\"20\" height=\"15\" fill=\"rgb(34, 197, 94)\" rx=\"5\" ry=\"5\"><\/rect><\/svg>\r\n                                <span style=\"align-item:center\">&nbsp;Pilihan Anda<\/span>\r\n                                <\/div>\r\n                        <\/div>\r\n                    <\/div>                    \r\n                    \r\n                    <!-- Your popup content -->\r\n                    <div id=\"mobilePopupDepartContent\" class=\"py-[25%] grid justify-center\">Seat is loading<\/div>\r\n\r\n                    <!-- <button id=\"backButton\" class=\"w-full text-white bg-red-500 hover:bg-red-800 focus:ring-4 focus:ring-orange-400 font-medium rounded-lg text-sm px-5 py-2.5 mb-4 focus:outline-none\">\r\n                         Back\r\n                     <\/button> -->\r\n                <\/div>\r\n            <\/div>\r\n            \r\n        <\/div>\r\n\r\n        <!-- GTM Tracking: Stage 2 - Trip List Page -->\r\n        <script>\r\n        \/\/ Track trip list view\r\n        dataLayer.push({\r\n            'event': 'booking_step',\r\n            'step': 2,\r\n            'step_name': 'trip_list',\r\n            'page_type': 'seatview',\r\n            'route_from': '',\r\n            'route_to': '',\r\n            'depart_date': '22-04-2026',\r\n            'available_trips': 5\r\n        });\r\n\r\n        \/\/ Function to track trip selection\r\n        function trackTripSelection(tripId, operatorName, price, time) {\r\n            dataLayer.push({\r\n                'event': 'trip_selected',\r\n                'step': 2,\r\n                'step_name': 'trip_selected',\r\n                'trip_id': tripId,\r\n                'operator': operatorName,\r\n                'price': price,\r\n                'departure_time': time\r\n            });\r\n        }\r\n        <\/script>\r\n\r\n        <script>\r\n            const mobileView = window.matchMedia(\"(max-width: 768px)\");\r\n            const returnDateInputRe = document.getElementById(\"toDateRe\");\r\n            const clearBtnRe = document.getElementById(\"clearDateRe\");\r\n            const returnDateInputReM = document.getElementById(\"toDateReM\");\r\n            const clearBtnReM = document.getElementById(\"clearDateReM\");\r\n\r\n            function checkReturnDate() {\r\n                if(mobileView.matches){\r\n                    if (returnDateInputReM.value) {\r\n                        clearBtnReM.classList.remove(\"hidden\");\r\n                    }\r\n                }\r\n                else {\r\n                    if (returnDateInputRe.value) {\r\n                        clearBtnRe.classList.remove(\"hidden\");\r\n                    }\r\n                }               \r\n            }\r\n            window.addEventListener(\"DOMContentLoaded\", checkReturnDate);\r\n\r\n            if(mobileView.matches){\r\n                returnDateInputReM.addEventListener(\"input\", checkReturnDate);\r\n            } else {\r\n                returnDateInputRe.addEventListener(\"input\", checkReturnDate);\r\n            }\r\n\r\n\r\n            let lastExpandedCard = null;\r\n\r\n            function toggleTripInfo(card) {    \r\n            \r\n                const additionalInfo = card.querySelector(\".seat-info\");\r\n\r\n                \/\/ If the card clicked is the same as the previously expanded card, do nothing.\r\n                if (lastExpandedCard === card) {\r\n                    return; \/\/No changes\r\n                }\r\n\r\n                \/\/ Collapse the last expanded card if there is one and different card\r\n                if (lastExpandedCard) {\r\n                    lastExpandedCard.classList.remove(\"expanded\");\r\n                    const lastAdditionalInfo = lastExpandedCard.querySelector(\".seat-info\");\r\n                    lastAdditionalInfo.innerHTML = \"\"; \/\/ Reset content of the last expanded card\r\n                }\r\n\r\n                \/\/ Toggle the \"expanded\" class to animate the expansion\r\n\r\n                \/\/Check if loading available, if available, remove it\r\n                const existingSpinner = document.querySelector(\".spinnerLoading\");\r\n                if (existingSpinner) {\r\n                    existingSpinner.remove();\r\n                }\r\n\r\n                const loading = document.createElement(\"div\");\r\n                loading.classList.add(\"spinnerLoading\");\r\n                loading.innerHTML = `\r\n                <div class=\"relative flex justify-center\">\r\n                    <svg class=\"w-8 h-8 text-orange-400 animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n                        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"><\/circle>\r\n                        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z\"><\/path>\r\n                    <\/svg>\r\n                <\/div>\r\n                `;\r\n                \r\n                \/\/ card.classList.add(\"pb-32\");\r\n                card.appendChild(loading);\r\n\r\n                \/\/ setTimeout(() => {\r\n                \/\/    card.removeChild(loading);\r\n                \/\/    card.classList.remove(\"pb-32\");\r\n                \/\/ }, 1000);\r\n\r\n                card.classList.add(\"expanded\");                \r\n\r\n\r\n                 \/\/ Update ARIA attributes for accessibility\r\n                card.setAttribute(\"aria-expanded\", \"true\");\r\n\r\n                \/\/ Optionally focus on the card when clicked\r\n                card.focus();\r\n\r\n                \/\/ Update the last expanded card reference\r\n                lastExpandedCard = card;\r\n\r\n            }\r\n    \r\n            \/\/ var data = ;\r\n\r\n           \/\/ var data = ;\r\n\r\n            \/\/ \/\/Slider \r\n            \/\/ let currentIndex = 2; \/\/ Start at the middle index\r\n            \/\/     const slider = document.getElementById(\"slider\");\r\n            \/\/     const sliderItems = document.querySelectorAll(\".slider-item\");\r\n            \/\/     const maxIndex = sliderItems.length - 1; \/\/ Last index\r\n\r\n            \/\/     document.getElementById(\"left-arrow\").addEventListener(\"click\", () => {\r\n            \/\/         if (currentIndex > 0) {\r\n            \/\/             currentIndex--;\r\n            \/\/             updateSliderPosition();\r\n            \/\/         }\r\n            \/\/     });\r\n\r\n            \/\/     document.getElementById(\"right-arrow\").addEventListener(\"click\", () => {\r\n            \/\/         if (currentIndex < maxIndex) {\r\n            \/\/             currentIndex++;\r\n            \/\/             updateSliderPosition();\r\n            \/\/         }\r\n            \/\/     });\r\n\r\n            \/\/     function updateSliderPosition() {\r\n            \/\/         const offset = -currentIndex * 160; \/\/ Each box width (150px) + margin (10px)\r\n            \/\/         slider.style.transform = `translateX(${offset}px)`;\r\n            \/\/     }\r\n            \/\/ \/\/End Slider\r\n\r\n            \/\/New Slider           \r\n\r\n                    const returnDataCheck = \"\";\r\n\r\n      \/\/ Function to parse DD-MM-YYYY to Date object\r\n        function parseDate(dateStr) {\r\n            let parts = dateStr.split(\"-\");\r\n            return new Date(parts[2], parts[1] - 1, parts[0]); \/\/ YYYY, MM (0-based), DD\r\n        }\r\n\r\n        \/\/ Get initial date from #dateContainer\r\n        let presetDateText = document.getElementById('dateContainer').textContent.trim();\r\n        let baseDate = parseDate(presetDateText);\r\n        let selectedDate = presetDateText; \/\/ Keep track of selected date\r\n\r\n        function updateDates() {\r\n            const dateContainer = document.getElementById('dateContainer');\r\n            dateContainer.innerHTML = '';\r\n\r\n            let today = new Date();\r\n            today.setHours(0, 0, 0, 0); \/\/ Normalize time for comparison\r\n\r\n            for (let i = -2; i <= 2; i++) {\r\n                let newDate = new Date(baseDate);\r\n                newDate.setDate(newDate.getDate() + i);\r\n                newDate.setHours(0, 0, 0, 0); \/\/ Normalize time\r\n\r\n                \/\/ Format display values\r\n                let optionsWeekday = { weekday: 'short' };\r\n                let optionsDate = { day: '2-digit', month: 'short' };\r\n                let weekday = newDate.toLocaleDateString('en-GB', optionsWeekday); \/\/ \"Fri\"\r\n                let dateMonth = newDate.toLocaleDateString('en-GB', optionsDate);  \/\/ \"20 Mar\"\r\n\r\n                \/\/ Get date in \"20-03-2025\" format\r\n                let day = String(newDate.getDate()).padStart(2, '0');\r\n                let month = String(newDate.getMonth() + 1).padStart(2, '0');\r\n                let year = newDate.getFullYear();\r\n                let valueDate = day + '-' + month + '-' + year;\r\n\r\n                \/\/ Create date box\r\n                let div = document.createElement('div');\r\n                div.className = 'cursor-pointer p-3 text-center rounded-lg date-box transition-all';\r\n\r\n                \/\/ Check if this date is the selected date and apply orange background\r\n                if (valueDate === selectedDate) {\r\n                    div.classList.add('bg-orange-400', 'text-white', 'cursor-not-allowed', 'no-magnify');\r\n                    div.classList.remove('bg-gray-300'); \/\/ Ensure the selected date is orange\r\n                    div.onclick = null; \/\/ Disable clicking on the selected date\r\n                } else if (newDate < today) {\r\n                    \/\/ Disable past dates (gray color)\r\n                    div.classList.add('bg-gray-300', 'text-gray-500', 'cursor-not-allowed', 'no-magnify');\r\n                    div.onclick = null;\r\n                } else {\r\n                    \/\/ For all other dates, keep the normal gray background and allow interaction\r\n                    div.classList.add('bg-gray-200', 'hover:scale-110');\r\n                    div.onclick = function () {\r\n                        setActive(div, valueDate);\r\n                        \/\/centerDate(valueDate);\r\n                        filterDateExpDepart(valueDate);\r\n                    };\r\n                }\r\n\r\n                \/\/ Create child elements\r\n                let spanWeekday = document.createElement('span');\r\n                spanWeekday.textContent = weekday;\r\n\r\n                let br = document.createElement('br');\r\n\r\n                let spanDateMonth = document.createElement('span');\r\n                spanDateMonth.textContent = dateMonth;\r\n\r\n                \/\/ Append elements to the div\r\n                div.appendChild(spanWeekday);\r\n                \/\/div.appendChild(br);\r\n                div.appendChild(spanDateMonth);\r\n                div.dataset.value = valueDate;\r\n\r\n                \/\/ Append the div to the container\r\n                dateContainer.appendChild(div);\r\n            }\r\n        }\r\n\r\n        function prevDate() {\r\n            baseDate.setDate(baseDate.getDate() - 1);\r\n            updateDates();\r\n        }\r\n\r\n        function nextDate() {\r\n            baseDate.setDate(baseDate.getDate() + 1);\r\n            updateDates();\r\n        }\r\n\r\n        function setActive(element, valueDate) {\r\n            \r\n            \/\/ Remove the orange background from all date boxes\r\n            const allDateBoxes = document.querySelectorAll('.date-box');\r\n            allDateBoxes.forEach(el => {\r\n                \/\/ Reset all date boxes to their default state\r\n                el.classList.remove('bg-orange-400', 'text-white', 'cursor-not-allowed', 'no-magnify');\r\n                el.classList.add('bg-gray-200', 'hover:scale-110'); \/\/ Restore normal state\r\n                el.onclick = function () {\r\n                    setActive(el, el.dataset.value);\r\n                    centerDate(el.dataset.value); \/\/ Center the clicked date\r\n                };\r\n            });\r\n\r\n            \/\/ Set the new active date (orange background)\r\n            element.classList.add('bg-orange-400', 'text-white', 'cursor-not-allowed', 'no-magnify');\r\n            element.classList.remove('bg-gray-200'); \/\/ Ensure no gray background on active date\r\n            element.onclick = null; \/\/ Make selected date unclickable\r\n            selectedDate = valueDate; \/\/ Update selected date\r\n        }\r\n\r\n        \/\/ Function to center the clicked date\r\n        function centerDate(valueDate) {\r\n            let clickedDate = parseDate(valueDate);\r\n            baseDate = clickedDate; \/\/ Update the base date to the clicked date\r\n            updateDates(); \/\/ Re-render the calendar with the new center date\r\n        }\r\n\r\n        \/\/ Initial rendering\r\n        updateDates();\r\n\r\n        \/\/Return\r\n        \r\n        if(returnDataCheck && returnDataCheck.length > 0 ) {\r\n            function parseDateR(dateStr) {\r\n                let parts = dateStr.split(\"-\");\r\n                return new Date(parts[2], parts[1] - 1, parts[0]); \/\/ YYYY, MM (0-based), DD\r\n            }\r\n\r\n            \/\/ Get initial date from #dateContainer\r\n            let presetDateTextR = document.getElementById('dateContainerR').textContent.trim();\r\n            let baseDateR = parseDate(presetDateTextR);\r\n            let selectedDateR = presetDateTextR; \/\/ Keep track of selected date\r\n\r\n            function updateDatesR() {\r\n                const dateContainer = document.getElementById('dateContainerR');\r\n                dateContainer.innerHTML = '';\r\n                \r\n                \/\/Convert Date\r\n                let rawDate = \"22-04-2026\";\r\n                 \/\/ split dd-mm-yyyy\r\n                let parts = rawDate.split(\"-\");\r\n                let today = new Date(parts[2], parts[1] - 1, parts[0]); \/\/ yyyy, mm-1, dd\r\n\r\n                \/\/let today = new Date(); \/\/Change To Depart Date\r\n\r\n                today.setHours(0, 0, 0, 0); \/\/ Normalize time for comparison\r\n\r\n                for (let i = -2; i <= 2; i++) {\r\n                    let newDate = new Date(baseDateR);\r\n                    newDate.setDate(newDate.getDate() + i);\r\n                    newDate.setHours(0, 0, 0, 0); \/\/ Normalize time\r\n\r\n                    \/\/ Format display values\r\n                    let optionsWeekday = { weekday: 'short' };\r\n                    let optionsDate = { day: '2-digit', month: 'short' };\r\n                    let weekday = newDate.toLocaleDateString('en-GB', optionsWeekday); \/\/ \"Fri\"\r\n                    let dateMonth = newDate.toLocaleDateString('en-GB', optionsDate);  \/\/ \"20 Mar\"\r\n\r\n                    \/\/ Get date in \"20-03-2025\" format\r\n                    let day = String(newDate.getDate()).padStart(2, '0');\r\n                    let month = String(newDate.getMonth() + 1).padStart(2, '0');\r\n                    let year = newDate.getFullYear();\r\n                    let valueDate = day + '-' + month + '-' + year;\r\n\r\n                    \/\/ Create date box\r\n                    let div = document.createElement('div');\r\n                    div.className = 'cursor-pointer p-3 text-center rounded-lg date-box transition-all';\r\n\r\n                    \/\/ Check if this date is the selected date and apply orange background\r\n                    if (valueDate === selectedDateR) {\r\n                        div.classList.add('bg-orange-400', 'text-white', 'cursor-not-allowed', 'no-magnify');\r\n                        div.classList.remove('bg-gray-300'); \/\/ Ensure the selected date is orange\r\n                        div.onclick = null; \/\/ Disable clicking on the selected date\r\n                    } else if (newDate < today) {\r\n                        \/\/ Disable past dates (gray color)\r\n                        div.classList.add('bg-gray-300', 'text-gray-500', 'cursor-not-allowed', 'no-magnify');\r\n                        div.onclick = null;\r\n                    } else {\r\n                        \/\/ For all other dates, keep the normal gray background and allow interaction\r\n                        div.classList.add('bg-gray-200', 'hover:scale-110');\r\n                        div.onclick = function () {\r\n                            setActiveR(div, valueDate);\r\n                            \/\/centerDateR(valueDate);\r\n                            filterDateExpDepartR(valueDate);\r\n                        };\r\n                    }\r\n\r\n                    \/\/ Create child elements\r\n                    let spanWeekday = document.createElement('span');\r\n                    spanWeekday.textContent = weekday;\r\n\r\n                    let br = document.createElement('br');\r\n\r\n                    let spanDateMonth = document.createElement('span');\r\n                    spanDateMonth.textContent = dateMonth;\r\n\r\n                    \/\/ Append elements to the div\r\n                    div.appendChild(spanWeekday);\r\n                    \/\/div.appendChild(br);\r\n                    div.appendChild(spanDateMonth);\r\n                    div.dataset.value = valueDate;\r\n\r\n                    \/\/ Append the div to the container\r\n                    dateContainer.appendChild(div);\r\n                }\r\n            }\r\n\r\n            function prevDateR() {\r\n                baseDateR.setDate(baseDate.getDate() - 1);\r\n                updateDatesR();\r\n            }\r\n\r\n            function nextDatRe() {\r\n                baseDateR.setDate(baseDate.getDate() + 1);\r\n                updateDatesR();\r\n            }\r\n\r\n            function setActiveR(element, valueDate) {\r\n                \r\n                \/\/ Remove the orange background from all date boxes\r\n                const allDateBoxes = document.querySelectorAll('.date-box');\r\n                allDateBoxes.forEach(el => {\r\n                    \/\/ Reset all date boxes to their default state\r\n                    el.classList.remove('bg-orange-400', 'text-white', 'cursor-not-allowed', 'no-magnify');\r\n                    el.classList.add('bg-gray-200', 'hover:scale-110'); \/\/ Restore normal state\r\n                    el.onclick = function () {\r\n                        setActiveR(el, el.dataset.value);\r\n                        centerDateR(el.dataset.value); \/\/ Center the clicked date\r\n                    };\r\n                });\r\n\r\n                \/\/ Set the new active date (orange background)\r\n                element.classList.add('bg-orange-400', 'text-white', 'cursor-not-allowed', 'no-magnify');\r\n                element.classList.remove('bg-gray-200'); \/\/ Ensure no gray background on active date\r\n                element.onclick = null; \/\/ Make selected date unclickable\r\n                selectedDateR = valueDate; \/\/ Update selected date\r\n            }\r\n\r\n            \/\/ Function to center the clicked date\r\n            function centerDateR(valueDate) {\r\n                let clickedDate = parseDate(valueDate);\r\n                baseDateR = clickedDate; \/\/ Update the base date to the clicked date\r\n                updateDatesR(); \/\/ Re-render the calendar with the new center date\r\n            }\r\n\r\n            \/\/ Initial rendering\r\n            updateDatesR();\r\n        }\r\n\r\n        \/\/Trip Search - Depart------------------------------------------------------------\r\n\r\n        let currentIndex = -1; \/\/ Track highlighted index\r\n        let filteredOptions = []; \/\/ Store filtered options\r\n        let focusableItems = []; \/\/ For keyboard nav\r\n        let newLoc = '';\r\n\r\n        const searchInputRe = document.getElementById('departFromRe');\r\n        const dropdownRe = document.getElementById('dropdownRe');\r\n        const departErrorRe = document.getElementById('departErrorRe');\r\n        const destinationInputRe = document.getElementById('departToRe');\r\n        searchInputRe.value = \"\";\r\n        searchInputRe.dataset.name = \"\";\r\n        searchInputRe.dataset.id = ;       \r\n\r\n        document.addEventListener('DOMContentLoaded', () => {\r\n            val(\"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjbGllbnRfaWQiOiI0OSIsInN1YiI6IjQxY2NjNGQ0LTY2NDQtNDMzZS1hMDQ4LTA4ZGRmZmM4MmMwYiIsInVzZXJfdHlwZSI6Ikd1ZXN0IiwiZGV2aWNlX2lkIjoiYjg5ZDAxNTYtNGE5MC00ZTJiLTg1OTUtMDhkZGZmYzgyYzE5IiwiaWF0IjoxNzc2Nzg5NDM0LCJleHAiOjE3NzY3OTAzMzQsImlzcyI6Imh0dHBzOi8vMTAuMjAuMjAxLjExOjEwNyIsImF1ZCI6Imh0dHBzOi8vMTAuMjAuMjAxLjExOjEwNyJ9.oTwHmDcHfcg1ZJH8tg-WDG4xL6Xma-3cjauKonjeXj4\", true);  \r\n        });         \r\n\r\n        setTimeout(() => {\r\n            destinationInputRe.value = \"\";\r\n            destinationInputRe.dataset.name = \"\";\r\n            destinationInputRe.dataset.id = ;\r\n        }, 2000);  \r\n\r\n        \/\/ Helper function to standardize the name case\r\n        function standardizeNameCase(name) {\r\n            return name.replace(\/([a-zA-Z0-9]+(?: [a-zA-Z0-9]+)*)(?: \\(([^)]+)\\))?\/g, (match, mainText, parenthesisText) => {\r\n                const standardizedMainText = mainText.split(' ')\r\n                    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())\r\n                    .join(' ');\r\n\r\n                const standardizedParenthesisText = parenthesisText ? \r\n                    parenthesisText.split(' ')\r\n                        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())\r\n                        .join(' ') : '';\r\n\r\n                return standardizedParenthesisText ? `${standardizedMainText} (${standardizedParenthesisText})` : standardizedMainText;\r\n            });\r\n        }\r\n\r\n        \/\/ Filter options based on search input and group them by genre\r\n        function filterOptionsRe() {\r\n        const searchValue = searchInputRe.value.toLowerCase();\r\n\r\n        \/\/ Filter matching options based on the 'name' field\r\n\r\n        filteredOptions = [{\"id\":23,\"code\":\"BTG\",\"name\":\"Bentong\",\"states\":\"Pahang\"},{\"id\":215,\"code\":\"TBA\",\"name\":\"Taman Bendahara\",\"states\":\"Kelantan\"},{\"id\":69,\"code\":\"KLG\",\"name\":\"Klang\",\"states\":\"Selangor\"},{\"id\":192,\"code\":\"SL\",\"name\":\"Selising\",\"states\":\"Kelantan\"},{\"id\":209,\"code\":\"PMH\",\"name\":\"Pasir Tumboh\",\"states\":\"Kelantan\"},{\"id\":278,\"code\":\"STH\",\"name\":\"SUNGAI TERAH\",\"states\":\"Kelantan\"},{\"id\":315,\"code\":\"CKJ\",\"name\":\"Changkat Jering\",\"states\":\"Perak\"},{\"id\":169,\"code\":\"TIN\",\"name\":\"Teluk Intan\",\"states\":\"Perak\"},{\"id\":132,\"code\":\"RPJG\",\"name\":\"Rantau Panjang\",\"states\":\"Kelantan\"},{\"id\":109,\"code\":\"NLI\",\"name\":\"Nilai\",\"states\":\"Negeri Sembilan\"},{\"id\":89,\"code\":\"KTN\",\"name\":\"Kuantan\",\"states\":\"Pahang\"},{\"id\":338,\"code\":\"TKGS\",\"name\":\"Terminal Kuching Sentral\",\"states\":\"Sarawak\"},{\"id\":195,\"code\":\"GTG\",\"name\":\"Genting Highlands\",\"states\":\"Pahang\"},{\"id\":3,\"code\":\"AS\",\"name\":\"Alor Setar\",\"states\":\"Kedah\"},{\"id\":152,\"code\":\"SKD\",\"name\":\"Skudai\",\"states\":\"Johor\"},{\"id\":295,\"code\":\"SLR\",\"name\":\"Balok(Sungai Ular)\",\"states\":\"Pahang\"},{\"id\":189,\"code\":\"RWG\",\"name\":\"Rawang\",\"states\":\"Selangor\"},{\"id\":335,\"code\":\"SPSK\",\"name\":\"Simpang Saratok\",\"states\":\"Sarawak\"},{\"id\":212,\"code\":\"PMS\",\"name\":\"Permaisuri\",\"states\":\"Terengganu\"},{\"id\":235,\"code\":\"PSA\",\"name\":\"Pokok Sena\",\"states\":\"Kedah\"},{\"id\":172,\"code\":\"TRI\",\"name\":\"Triang\",\"states\":\"Pahang\"},{\"id\":66,\"code\":\"KRT\",\"name\":\"Kertih\",\"states\":\"Terengganu\"},{\"id\":229,\"code\":\"KDK\",\"name\":\"Kadok\",\"states\":\"Kelantan\"},{\"id\":275,\"code\":\"KBH\",\"name\":\"KUALA BALAH\",\"states\":\"Kelantan\"},{\"id\":318,\"code\":\"HUNZ\",\"name\":\"Hospital Unisza\",\"states\":\"Terengganu\"},{\"id\":126,\"code\":\"PTN\",\"name\":\"Pontian\",\"states\":\"Johor\"},{\"id\":26,\"code\":\"BJL\",\"name\":\"Bukit Jalil\",\"states\":\"Kuala Lumpur\"},{\"id\":129,\"code\":\"PCDG\",\"name\":\"Pulai Condong\",\"states\":\"Kelantan\"},{\"id\":106,\"code\":\"MR\",\"name\":\"Muar\",\"states\":\"Johor\"},{\"id\":63,\"code\":\"KMTG\",\"name\":\"Kamunting\",\"states\":\"Perak\"},{\"id\":255,\"code\":\"HGM\",\"name\":\"Hentian Gua Musang\",\"states\":\"Kelantan\"},{\"id\":43,\"code\":\"GRC\",\"name\":\"Guar Chempedak\",\"states\":\"Kedah\"},{\"id\":292,\"code\":\"CLK\",\"name\":\"Chalok\",\"states\":\"Terengganu\"},{\"id\":49,\"code\":\"JPK\",\"name\":\"Jalan Pekeliling\",\"states\":\"Kuala Lumpur\"},{\"id\":298,\"code\":\"SCLK\",\"name\":\"Setiu(Chalok Kedai)\",\"states\":\"Terengganu\"},{\"id\":261,\"code\":\"BT6\",\"name\":\"Batu 6\",\"states\":\"Terengganu\"},{\"id\":238,\"code\":\"KMK\",\"name\":\"Kemasik\",\"states\":\"Terengganu\"},{\"id\":92,\"code\":\"LBS\",\"name\":\"Labis\",\"states\":\"Johor\"},{\"id\":115,\"code\":\"PGDG\",\"name\":\"Pasir Gudang\",\"states\":\"Johor\"},{\"id\":161,\"code\":\"TP\",\"name\":\"Taiping\",\"states\":\"Perak\"},{\"id\":29,\"code\":\"BKP\",\"name\":\"Bukit Payung\",\"states\":\"Terengganu\"},{\"id\":175,\"code\":\"WKFT\",\"name\":\"Wakaf Tapai\",\"states\":\"Terengganu\"},{\"id\":324,\"code\":\"TBG\",\"name\":\"Terminal Bersepadu Gombak\",\"states\":\"Selangor\"},{\"id\":221,\"code\":\"TMK\",\"name\":\"Tanjung Gemok\",\"states\":\"Johor\"},{\"id\":75,\"code\":\"KTT\",\"name\":\"Kota Tinggi\",\"states\":\"Johor\"},{\"id\":344,\"code\":\"OBS\",\"name\":\"Singapore(Oxley Bizhub)\",\"states\":\"Singapore\"},{\"id\":158,\"code\":\"SP\",\"name\":\"Sungai Petani\",\"states\":\"Kedah\"},{\"id\":244,\"code\":\"TAMN\",\"name\":\"Tun Aminah\",\"states\":\"Johor\"},{\"id\":52,\"code\":\"JGK\",\"name\":\"Jengka\",\"states\":\"Pahang\"},{\"id\":95,\"code\":\"LMT\",\"name\":\"Lumut\",\"states\":\"Perak\"},{\"id\":72,\"code\":\"KB\",\"name\":\"Kota Bharu\",\"states\":\"Kelantan\"},{\"id\":118,\"code\":\"PKN\",\"name\":\"Pekan\",\"states\":\"Pahang\"},{\"id\":258,\"code\":\"CRTG\",\"name\":\"Cherating\",\"states\":\"Pahang\"},{\"id\":264,\"code\":\"ISKJ\",\"name\":\"Seri Iskandar(J)\",\"states\":\"Johor\"},{\"id\":281,\"code\":\"LGG\",\"name\":\"LENGGONG\",\"states\":\"Perak\"},{\"id\":78,\"code\":\"KBST\",\"name\":\"Kuala Besut\",\"states\":\"Terengganu\"},{\"id\":218,\"code\":\"UJL\",\"name\":\"UMK Jeli\",\"states\":\"Kelantan\"},{\"id\":327,\"code\":\"MYY\",\"name\":\"Terminal Bas Miri\",\"states\":\"Sarawak\"},{\"id\":321,\"code\":\"USM\",\"name\":\"USM Pulau Pinang\",\"states\":\"Pulau Pinang\"},{\"id\":12,\"code\":\"BSR\",\"name\":\"Bagan Serai\",\"states\":\"Perak\"},{\"id\":178,\"code\":\"NLM\",\"name\":\"Nilam Puri\",\"states\":\"Kelantan\"},{\"id\":35,\"code\":\"CHN\",\"name\":\"Chini\",\"states\":\"Pahang\"},{\"id\":135,\"code\":\"SBM\",\"name\":\"Sabak Bernam\",\"states\":\"Selangor\"},{\"id\":112,\"code\":\"PRP\",\"name\":\"Pantai Remis\",\"states\":\"Perak\"},{\"id\":55,\"code\":\"JTH\",\"name\":\"Jertih\",\"states\":\"Terengganu\"},{\"id\":304,\"code\":\"PBP\",\"name\":\"Paka(Balai Polis)\",\"states\":\"Terengganu\"},{\"id\":241,\"code\":\"TPT\",\"name\":\"Tumpat\",\"states\":\"Kelantan\"},{\"id\":98,\"code\":\"MSI\",\"name\":\"Masai\",\"states\":\"Johor\"},{\"id\":144,\"code\":\"SIK\",\"name\":\"Sik\",\"states\":\"Kedah\"},{\"id\":167,\"code\":\"TKY\",\"name\":\"Tasik Kenyir\",\"states\":\"Terengganu\"},{\"id\":330,\"code\":\"TTU\",\"name\":\"Tatau\",\"states\":\"Sarawak\"},{\"id\":307,\"code\":\"KBKS\",\"name\":\"Kota Bharu - Kota Seri Bong\",\"states\":\"Kelantan\"},{\"id\":230,\"code\":\"BBG\",\"name\":\"Bukit Bunga\",\"states\":\"Kelantan\"},{\"id\":313,\"code\":\"SEC13\",\"name\":\"Seksyen 13 Shah Alam\",\"states\":\"Selangor\"},{\"id\":21,\"code\":\"BG\",\"name\":\"Batu Gajah\",\"states\":\"Perak\"},{\"id\":121,\"code\":\"PG\",\"name\":\"Penang(SG Nibong)\",\"states\":\"Pulau Pinang\"},{\"id\":273,\"code\":\"ARWNA\",\"name\":\"Genting Awana\",\"states\":\"Pahang\"},{\"id\":250,\"code\":\"MRN\",\"name\":\"Maran\",\"states\":\"Pahang\"},{\"id\":58,\"code\":\"JJY\",\"name\":\"Johor Jaya\",\"states\":\"Johor\"},{\"id\":81,\"code\":\"KRI\",\"name\":\"Kuala Krai\",\"states\":\"Kelantan\"},{\"id\":64,\"code\":\"KGR\",\"name\":\"Kangar\",\"states\":\"Perlis\"},{\"id\":207,\"code\":\"LLH\",\"name\":\"Laloh\",\"states\":\"Kelantan\"},{\"id\":44,\"code\":\"GRN\",\"name\":\"Gurun\",\"states\":\"Kedah\"},{\"id\":293,\"code\":\"SGT2\",\"name\":\"Segamat(KFC Tmn Yayasan)\",\"states\":\"Johor\"},{\"id\":141,\"code\":\"ISK\",\"name\":\"Seri Iskandar\",\"states\":\"Perak\"},{\"id\":187,\"code\":\"UTR\",\"name\":\"Ulu Tiram\",\"states\":\"Johor\"},{\"id\":164,\"code\":\"TKRG\",\"name\":\"Tanjung Karang\",\"states\":\"Selangor\"},{\"id\":287,\"code\":\"WTB\",\"name\":\"Wakaf Tengah\",\"states\":\"Terengganu\"},{\"id\":310,\"code\":\"PTLG\",\"name\":\"Pasir Tumboh(SK Long Gafar)\",\"states\":\"Kelantan\"},{\"id\":210,\"code\":\"PHL\",\"name\":\"Pauh Lima\",\"states\":\"Kelantan\"},{\"id\":333,\"code\":\"SBTG\",\"name\":\"Simpang Bintangor\",\"states\":\"Sarawak\"},{\"id\":270,\"code\":\"SMPL\",\"name\":\"Simpang Pulai\",\"states\":\"Perak\"},{\"id\":224,\"code\":\"UMT\",\"name\":\"Universiti Malaysia Terengganu\",\"states\":\"Terengganu\"},{\"id\":124,\"code\":\"PHU\",\"name\":\"Pengkalan Hulu\",\"states\":\"Perak\"},{\"id\":84,\"code\":\"KNR\",\"name\":\"Kuala Nerang\",\"states\":\"Kedah\"},{\"id\":227,\"code\":\"klia2\",\"name\":\"Kuala Lumpur International Airport 2\",\"states\":\"Selangor\"},{\"id\":204,\"code\":\"JLT\",\"name\":\"Jelawat\",\"states\":\"Kelantan\"},{\"id\":61,\"code\":\"KPR\",\"name\":\"Kampar\",\"states\":\"Perak\"},{\"id\":41,\"code\":\"GK\",\"name\":\"Grik\",\"states\":\"Perak\"},{\"id\":290,\"code\":\"PNK\",\"name\":\"Penarik\",\"states\":\"Terengganu\"},{\"id\":247,\"code\":\"PLH\",\"name\":\"Paloh\",\"states\":\"Kelantan\"},{\"id\":213,\"code\":\"CTK\",\"name\":\"PPK Chetok\",\"states\":\"Kelantan\"},{\"id\":336,\"code\":\"SPBG\",\"name\":\"Simpang Betong\",\"states\":\"Sarawak\"},{\"id\":236,\"code\":\"MRG\",\"name\":\"Marang\",\"states\":\"Terengganu\"},{\"id\":259,\"code\":\"CHDRG\",\"name\":\"Chendering\",\"states\":\"Terengganu\"},{\"id\":113,\"code\":\"PBT\",\"name\":\"Parit Buntar\",\"states\":\"Perak\"},{\"id\":27,\"code\":\"BKH\",\"name\":\"Bukit Kayu Hitam\",\"states\":\"Kedah\"},{\"id\":276,\"code\":\"JWG\",\"name\":\"JELAWANG (GUNUNG STONG)\",\"states\":\"Kelantan\"},{\"id\":319,\"code\":\"MYT\",\"name\":\"Mydin Tunjong\",\"states\":\"Kelantan\"},{\"id\":322,\"code\":\"BGO\",\"name\":\"Bagan Datuk\",\"states\":\"Perak\"},{\"id\":173,\"code\":\"ULDU\",\"name\":\"Uitm Lendu\",\"states\":\"Melaka\"},{\"id\":156,\"code\":\"SGB\",\"name\":\"Sungai Besar\",\"states\":\"Selangor\"},{\"id\":130,\"code\":\"PNG\",\"name\":\"Penang\",\"states\":\"Pulau Pinang\"},{\"id\":87,\"code\":\"KRP\",\"name\":\"Kuala Rompin\",\"states\":\"Pahang\"},{\"id\":256,\"code\":\"GUNG\",\"name\":\"Bachok-Gunong\",\"states\":\"Kelantan\"},{\"id\":7,\"code\":\"AHJ\",\"name\":\"Ayer Hitam(J)\",\"states\":\"Johor\"},{\"id\":299,\"code\":\"STO\",\"name\":\"Setiu(sg. Tong)\",\"states\":\"Terengganu\"},{\"id\":342,\"code\":\"SRN\",\"name\":\"Terminal Bas Serian\",\"states\":\"Sarawak\"},{\"id\":150,\"code\":\"WLD\",\"name\":\"Singapore Woodlands\",\"states\":\"Singapore\"},{\"id\":24,\"code\":\"BD\",\"name\":\"Bidor\",\"states\":\"Perak\"},{\"id\":47,\"code\":\"IPH\",\"name\":\"Ipoh\",\"states\":\"Perak\"},{\"id\":70,\"code\":\"KLU\",\"name\":\"Kluang\",\"states\":\"Johor\"},{\"id\":239,\"code\":\"DPM\",\"name\":\"Depo Mutiara\",\"states\":\"Kelantan\"},{\"id\":216,\"code\":\"TKM\",\"name\":\"Teluk Mesira\",\"states\":\"Kelantan\"},{\"id\":233,\"code\":\"SLY\",\"name\":\"Selayang(JPN Gombak)\",\"states\":\"Selangor\"},{\"id\":30,\"code\":\"BTW\",\"name\":\"Butterworth\",\"states\":\"Pulau Pinang\"},{\"id\":279,\"code\":\"ALS\",\"name\":\"Ayer Lanas\",\"states\":\"Kelantan\"},{\"id\":316,\"code\":\"BKM\",\"name\":\"Bukit Merah\",\"states\":\"Perak\"},{\"id\":170,\"code\":\"TLH\",\"name\":\"Temerloh\",\"states\":\"Pahang\"},{\"id\":176,\"code\":\"YP\",\"name\":\"Yong Peng\",\"states\":\"Johor\"},{\"id\":153,\"code\":\"SMNJG\",\"name\":\"Sri Manjung\",\"states\":\"Perak\"},{\"id\":110,\"code\":\"PGH\",\"name\":\"Pagoh\",\"states\":\"Johor\"},{\"id\":10,\"code\":\"ATP\",\"name\":\"Ayer Tawar\",\"states\":\"Perak\"},{\"id\":133,\"code\":\"RAUB\",\"name\":\"Raub\",\"states\":\"Pahang\"},{\"id\":196,\"code\":\"KLIA\",\"name\":\"Kuala Lumpur International Airport\",\"states\":\"Selangor\"},{\"id\":90,\"code\":\"KLA\",\"name\":\"Kulai\",\"states\":\"Johor\"},{\"id\":253,\"code\":\"MEG\",\"name\":\"Mercang\",\"states\":\"Terengganu\"},{\"id\":96,\"code\":\"MCHG\",\"name\":\"Machang\",\"states\":\"Kelantan\"},{\"id\":142,\"code\":\"STWN\",\"name\":\"Sitiawan\",\"states\":\"Perak\"},{\"id\":282,\"code\":\"SBH\",\"name\":\"SUNGAI BULOH\",\"states\":\"Selangor\"},{\"id\":288,\"code\":\"RSA\",\"name\":\"Rusila\",\"states\":\"Terengganu\"},{\"id\":305,\"code\":\"MMEG\",\"name\":\"Marang(Merchang)\",\"states\":\"Terengganu\"},{\"id\":219,\"code\":\"UMP\",\"name\":\"UMP\",\"states\":\"Pahang\"},{\"id\":79,\"code\":\"KKSR\",\"name\":\"Kuala Kangsar\",\"states\":\"Perak\"},{\"id\":328,\"code\":\"BNH\",\"name\":\"Batu Niah\",\"states\":\"Sarawak\"},{\"id\":265,\"code\":\"FWH\",\"name\":\"First World Hotel\",\"states\":\"Pahang\"},{\"id\":179,\"code\":\"KLS\",\"name\":\"KL Sentral\",\"states\":\"Kuala Lumpur\"},{\"id\":205,\"code\":\"KRJ\",\"name\":\"Kg. Raja\",\"states\":\"Terengganu\"},{\"id\":13,\"code\":\"BAH\",\"name\":\"Bahau\",\"states\":\"Negeri Sembilan\"},{\"id\":136,\"code\":\"SGT\",\"name\":\"Segamat\",\"states\":\"Johor\"},{\"id\":242,\"code\":\"WZN\",\"name\":\"Wakaf Zain\",\"states\":\"Kelantan\"},{\"id\":56,\"code\":\"JTR\",\"name\":\"Jitra\",\"states\":\"Kedah\"},{\"id\":199,\"code\":\"DPG\",\"name\":\"Kuala Krai(D.Peladang)\",\"states\":\"Kelantan\"},{\"id\":99,\"code\":\"MT\",\"name\":\"Masjid Tanah\",\"states\":\"Melaka\"},{\"id\":285,\"code\":\"PKG\",\"name\":\"Marang(Pulau Kerengga)\",\"states\":\"Terengganu\"},{\"id\":116,\"code\":\"PMAS\",\"name\":\"Pasir Mas\",\"states\":\"Kelantan\"},{\"id\":139,\"code\":\"SDG\",\"name\":\"Serdang\",\"states\":\"Kedah\"},{\"id\":162,\"code\":\"TMH\",\"name\":\"Tanah Merah\",\"states\":\"Kelantan\"},{\"id\":325,\"code\":\"HOP\",\"name\":\"Hotel Perdana\",\"states\":\"Kelantan\"},{\"id\":122,\"code\":\"PDG\",\"name\":\"Pendang\",\"states\":\"Kedah\"},{\"id\":76,\"code\":\"KROH\",\"name\":\"Kroh\",\"states\":\"Perak\"},{\"id\":202,\"code\":\"CKU\",\"name\":\"Chiku 3\",\"states\":\"Kelantan\"},{\"id\":225,\"code\":\"DNK\",\"name\":\"Danok\",\"states\":\"Thailand\"},{\"id\":33,\"code\":\"CLN\",\"name\":\"Changlun\",\"states\":\"Kedah\"},{\"id\":39,\"code\":\"GPG\",\"name\":\"Gopeng\",\"states\":\"Perak\"},{\"id\":16,\"code\":\"BPR\",\"name\":\"Bandar Penawar\",\"states\":\"Johor\"},{\"id\":182,\"code\":\"JSN\",\"name\":\"Jasin\",\"states\":\"Melaka\"},{\"id\":159,\"code\":\"SGRT\",\"name\":\"Sungai Rengit\",\"states\":\"Johor\"},{\"id\":302,\"code\":\"MKM\",\"name\":\"Kemasik(MesraMall)\",\"states\":\"Terengganu\"},{\"id\":165,\"code\":\"TGM\",\"name\":\"Tanjung Malim\",\"states\":\"Perak\"},{\"id\":211,\"code\":\"PGT\",\"name\":\"Peringat\",\"states\":\"Kelantan\"},{\"id\":188,\"code\":\"PCHG\",\"name\":\"Puchong\",\"states\":\"Selangor\"},{\"id\":311,\"code\":\"TPNG\",\"name\":\"Depo Naza(Tapang)\",\"states\":\"Kelantan\"},{\"id\":334,\"code\":\"SBLT\",\"name\":\"Simpang Bulat\",\"states\":\"Sarawak\"},{\"id\":125,\"code\":\"PKBR\",\"name\":\"Pengkalan Kubor\",\"states\":\"Kelantan\"},{\"id\":65,\"code\":\"KMM\",\"name\":\"Kemaman\",\"states\":\"Terengganu\"},{\"id\":317,\"code\":\"AOP\",\"name\":\"Alor Pongsu\",\"states\":\"Perak\"},{\"id\":171,\"code\":\"KB1\",\"name\":\"Terminal Tesco(kb)\",\"states\":\"Kelantan\"},{\"id\":25,\"code\":\"BKB\",\"name\":\"Bukit Beruntung\",\"states\":\"Selangor\"},{\"id\":271,\"code\":\"CMHG\",\"name\":\"Cameron Highlands\",\"states\":\"Pahang\"},{\"id\":105,\"code\":\"MZS\",\"name\":\"Muadzam Shah\",\"states\":\"Pahang\"},{\"id\":228,\"code\":\"UMC\",\"name\":\"Uitm Machang\",\"states\":\"Kelantan\"},{\"id\":85,\"code\":\"KP\",\"name\":\"Kuala Perlis\",\"states\":\"Perlis\"},{\"id\":62,\"code\":\"KGKH\",\"name\":\"Kampung Koh\",\"states\":\"Perak\"},{\"id\":42,\"code\":\"GMSG\",\"name\":\"Gua Musang\",\"states\":\"Kelantan\"},{\"id\":291,\"code\":\"KBB\",\"name\":\"Bari\",\"states\":\"Terengganu\"},{\"id\":254,\"code\":\"KJL\",\"name\":\"Kijal\",\"states\":\"Terengganu\"},{\"id\":248,\"code\":\"PJL\",\"name\":\"Politeknik Jeli\",\"states\":\"Kelantan\"},{\"id\":148,\"code\":\"SGP\",\"name\":\"Singapore\",\"states\":\"Singapore\"},{\"id\":168,\"code\":\"TBS\",\"name\":\"Terminal Bersepadu Selatan\",\"states\":\"Kuala Lumpur\"},{\"id\":191,\"code\":\"ST\",\"name\":\"Setiu\",\"states\":\"Terengganu\"},{\"id\":331,\"code\":\"SSLG\",\"name\":\"Simpang Selangau\",\"states\":\"Sarawak\"},{\"id\":231,\"code\":\"UNISZA\",\"name\":\"UNISZA\",\"states\":\"Terengganu\"},{\"id\":128,\"code\":\"PDR\",\"name\":\"Puduraya\",\"states\":\"Kuala Lumpur\"},{\"id\":22,\"code\":\"BPT\",\"name\":\"Batu Pahat\",\"states\":\"Johor\"},{\"id\":274,\"code\":\"STGH\",\"name\":\"Simpang Tenggaroh\",\"states\":\"Johor\"},{\"id\":82,\"code\":\"KLI\",\"name\":\"Kuala Lipis\",\"states\":\"Pahang\"},{\"id\":88,\"code\":\"KT\",\"name\":\"Kuala Terengganu\",\"states\":\"Terengganu\"},{\"id\":208,\"code\":\"PCR\",\"name\":\"Panchor\",\"states\":\"Kelantan\"},{\"id\":337,\"code\":\"SJLK\",\"name\":\"Simpang Jelukong\",\"states\":\"Sarawak\"},{\"id\":45,\"code\":\"HDT\",\"name\":\"Hentian Duta\",\"states\":\"Kuala Lumpur\"},{\"id\":294,\"code\":\"KMH\",\"name\":\"Kemahang\",\"states\":\"Kelantan\"},{\"id\":145,\"code\":\"SG\",\"name\":\"Simpang\",\"states\":\"Perak\"},{\"id\":2,\"code\":\"ALG\",\"name\":\"Alor Gajah\",\"states\":\"Melaka\"},{\"id\":48,\"code\":\"IPHMG\",\"name\":\"Ipoh(medan Gopeng)\",\"states\":\"Perak\"},{\"id\":71,\"code\":\"KLNS\",\"name\":\"Kok Lanas\",\"states\":\"Kelantan\"},{\"id\":117,\"code\":\"PTH\",\"name\":\"Pasir Puteh\",\"states\":\"Kelantan\"},{\"id\":240,\"code\":\"GEM\",\"name\":\"Gemas\",\"states\":\"Negeri Sembilan\"},{\"id\":257,\"code\":\"GMC\",\"name\":\"Gemenceh\",\"states\":\"Negeri Sembilan\"},{\"id\":280,\"code\":\"SMP\",\"name\":\"Simpang Taiping\",\"states\":\"Perak\"},{\"id\":31,\"code\":\"CHA\",\"name\":\"Chaah\",\"states\":\"Johor\"},{\"id\":217,\"code\":\"TBL\",\"name\":\"Tok Bali\",\"states\":\"Kelantan\"},{\"id\":154,\"code\":\"SPTR\",\"name\":\"Sri Putri\",\"states\":\"Johor\"},{\"id\":134,\"code\":\"RPN\",\"name\":\"Rompin\",\"states\":\"Pahang\"},{\"id\":11,\"code\":\"BCK\",\"name\":\"Bachok\",\"states\":\"Kelantan\"},{\"id\":111,\"code\":\"PAKA\",\"name\":\"Paka\",\"states\":\"Terengganu\"},{\"id\":54,\"code\":\"JRT\",\"name\":\"Jerantut\",\"states\":\"Pahang\"},{\"id\":303,\"code\":\"IKM\",\"name\":\"Kemasik(IKBN)\",\"states\":\"Terengganu\"},{\"id\":91,\"code\":\"KLM\",\"name\":\"Kulim\",\"states\":\"Kedah\"},{\"id\":214,\"code\":\"PCG\",\"name\":\"Puchong Prima\",\"states\":\"Selangor\"},{\"id\":237,\"code\":\"TMNU\",\"name\":\"Taman U\",\"states\":\"Johor\"},{\"id\":260,\"code\":\"BTS\",\"name\":\"Berjaya Times Square\",\"states\":\"Kuala Lumpur\"},{\"id\":283,\"code\":\"DMAI\",\"name\":\"Damansara Damai\",\"states\":\"Selangor\"},{\"id\":220,\"code\":\"EDU\",\"name\":\"Endau\",\"states\":\"Johor\"},{\"id\":114,\"code\":\"PRJ\",\"name\":\"Parit Raja\",\"states\":\"Johor\"},{\"id\":68,\"code\":\"KTH\",\"name\":\"Ketereh\",\"states\":\"Kelantan\"},{\"id\":277,\"code\":\"MRT\",\"name\":\"MERANTO\",\"states\":\"Kelantan\"},{\"id\":28,\"code\":\"BM\",\"name\":\"Bukit Mertajam\",\"states\":\"Pulau Pinang\"},{\"id\":323,\"code\":\"PLH2\",\"name\":\"Paloh 2\",\"states\":\"Kelantan\"},{\"id\":174,\"code\":\"UUM\",\"name\":\"Uum Sintok\",\"states\":\"Kedah\"},{\"id\":74,\"code\":\"KSS\",\"name\":\"Kota Sarang Semut\",\"states\":\"Kedah\"},{\"id\":320,\"code\":\"UTM\",\"name\":\"UTM Skudai\",\"states\":\"Johor\"},{\"id\":131,\"code\":\"PTJ\",\"name\":\"Putrajaya\",\"states\":\"Kuala Lumpur\"},{\"id\":137,\"code\":\"SKC\",\"name\":\"Sekinchan\",\"states\":\"Selangor\"},{\"id\":51,\"code\":\"JELI\",\"name\":\"Jeli\",\"states\":\"Kelantan\"},{\"id\":300,\"code\":\"MTZ\",\"name\":\"K. Terengganu (Msd Terapung)\",\"states\":\"Terengganu\"},{\"id\":151,\"code\":\"BNLAY\",\"name\":\"Singapore(Boon Lay)\",\"states\":\"Singapore\"},{\"id\":194,\"code\":\"HDY\",\"name\":\"Hatyai\",\"states\":\"Thailand\"},{\"id\":200,\"code\":\"MLR\",\"name\":\"Melor\",\"states\":\"Kelantan\"},{\"id\":343,\"code\":\"JUR\",\"name\":\"Singapore(Jurong East)\",\"states\":\"Singapore\"},{\"id\":309,\"code\":\"KSEL\",\"name\":\"Kuala Selangor\",\"states\":\"Selangor\"},{\"id\":286,\"code\":\"GBL\",\"name\":\"GONG BALAI\",\"states\":\"Terengganu\"},{\"id\":263,\"code\":\"AJIL\",\"name\":\"Ajil\",\"states\":\"Terengganu\"},{\"id\":140,\"code\":\"SBN\",\"name\":\"Seremban\",\"states\":\"Negeri Sembilan\"},{\"id\":163,\"code\":\"TGK\",\"name\":\"Tangkak\",\"states\":\"Johor\"},{\"id\":332,\"code\":\"SBW\",\"name\":\"Terminal Bas Sibu\",\"states\":\"Sarawak\"},{\"id\":77,\"code\":\"KBRG\",\"name\":\"Kuala Berang\",\"states\":\"Terengganu\"},{\"id\":17,\"code\":\"BTR\",\"name\":\"Keratong\",\"states\":\"Pahang\"},{\"id\":326,\"code\":\"SGC\",\"name\":\"Singapore(Grantral Complex)\",\"states\":\"Singapore\"},{\"id\":269,\"code\":\"JLTNG\",\"name\":\"Jelutong\",\"states\":\"Pulau Pinang\"},{\"id\":123,\"code\":\"PCPA\",\"name\":\"Pengkalan Chepa\",\"states\":\"Kelantan\"},{\"id\":60,\"code\":\"KJG\",\"name\":\"Kajang\",\"states\":\"Selangor\"},{\"id\":83,\"code\":\"KL\",\"name\":\"Kuala Lumpur\",\"states\":\"Kuala Lumpur\"},{\"id\":34,\"code\":\"CMR\",\"name\":\"Chemor\",\"states\":\"Perak\"},{\"id\":40,\"code\":\"GWD\",\"name\":\"Greenword\",\"states\":\"Selangor\"},{\"id\":183,\"code\":\"MRLM\",\"name\":\"Merlimau\",\"states\":\"Melaka\"},{\"id\":160,\"code\":\"SSPT\",\"name\":\"Sungai Siput\",\"states\":\"Perak\"},{\"id\":103,\"code\":\"MSG\",\"name\":\"Mersing\",\"states\":\"Johor\"},{\"id\":289,\"code\":\"MER\",\"name\":\"Merang\",\"states\":\"Terengganu\"},{\"id\":97,\"code\":\"MNJG\",\"name\":\"Manjung\",\"states\":\"Perak\"},{\"id\":143,\"code\":\"SA\",\"name\":\"Shah Alam\",\"states\":\"Selangor\"},{\"id\":120,\"code\":\"PGK\",\"name\":\"Penang(komtar)\",\"states\":\"Pulau Pinang\"},{\"id\":166,\"code\":\"TPH\",\"name\":\"Tapah\",\"states\":\"Perak\"},{\"id\":329,\"code\":\"BTU\",\"name\":\"Terminal Bas Bintulu\",\"states\":\"Sarawak\"},{\"id\":80,\"code\":\"KTL\",\"name\":\"Kuala Ketil\",\"states\":\"Kedah\"},{\"id\":57,\"code\":\"JB\",\"name\":\"Johor Bahru\",\"states\":\"Johor\"},{\"id\":206,\"code\":\"KKN\",\"name\":\"Kubang Kerian\",\"states\":\"Kelantan\"},{\"id\":14,\"code\":\"BLG\",\"name\":\"Baling\",\"states\":\"Kedah\"},{\"id\":37,\"code\":\"DGN\",\"name\":\"Dungun\",\"states\":\"Terengganu\"},{\"id\":243,\"code\":\"TPN\",\"name\":\"Tampin\",\"states\":\"Negeri Sembilan\"},{\"id\":100,\"code\":\"MLK\",\"name\":\"Melaka\",\"states\":\"Melaka\"}].filter(\r\n        (item) =>\r\n            item.name.toLowerCase().includes(searchValue) ||\r\n            item.states.toLowerCase().includes(searchValue) ||\r\n            item.code.toLowerCase().includes(searchValue)\r\n        );    \r\n\r\n        \/\/ Sort the filtered options first by genre, then by name\r\n        filteredOptions.sort((a, b) => {\r\n            const statesCompare = a.states.toLowerCase().localeCompare(b.states.toLowerCase());\r\n            if (statesCompare !== 0) {\r\n                return statesCompare;  \/\/ Sort by genre if different\r\n            }\r\n            return a.name.toLowerCase().localeCompare(b.name.toLowerCase());  \/\/ Sort by name within the same genre\r\n        });\r\n\r\n        \/\/ Group items by 'genre'\r\n        const groupedOptions = filteredOptions.reduce((groups, item) => {\r\n            const states = item.states || 'Other';\r\n            if (!groups[states]) {\r\n                groups[states] = [];\r\n            }\r\n            groups[states].push(item);\r\n            return groups;\r\n        }, {});\r\n\r\n        \/\/ Clear the dropdown list\r\n        dropdownRe.innerHTML = '';\r\n        focusableItems = [];\r\n        currentIndex = -1;\r\n\r\n        \/\/ If no matches found, show the \"No results found\" message\r\n        if (filteredOptions.length === 0) {\r\n            const noResultsMessage = document.createElement('div');\r\n            noResultsMessage.classList.add('no-results');\r\n            noResultsMessage.textContent = 'No results found';\r\n            dropdownRe.appendChild(noResultsMessage);\r\n        } else {\r\n            \/\/ Create optgroups and list items for the grouped options\r\n            Object.keys(groupedOptions).forEach(states => {\r\n                optgroup = document.createElement('div');\r\n                optgroup.classList.add('dropdown-item', 'font-semibold');\r\n                optgroup.textContent = states;\r\n                dropdownRe.appendChild(optgroup);\r\n\r\n                \/\/ Create list items for each genre group\r\n                groupedOptions[states].forEach(item => {\r\n                    listItem = document.createElement(\"button\");\r\n                    listItem.type = \"button\";\r\n                    listItem.classList.add(\r\n                        \"dropdown-item\",\r\n                        \"w-full\", \/\/ Full width for click\/focus\r\n                        \"text-left\", \/\/ Align text left inside button\r\n                        \"px-2\",\r\n                        \"py-1\", \/\/ Padding\r\n                        \"rounded\",\r\n                        \"focus:outline-none\",\r\n                        \"focus:ring-2\",\r\n                        \"focus:ring-orange-400\",\r\n                        \"focus:bg-orange-500\",\r\n                        \"focus:text-white\",\r\n                        \"transition-colors\"\r\n                    );\r\n                    listItem.setAttribute(\"data-id\", item.id);\r\n                    listItem.setAttribute(\"data-name\", item.name);\r\n                    listItem.setAttribute(\"data-type\", \"item\");\r\n                    \r\n                    span = document.createElement('span');\r\n                    span.textContent = standardizeNameCase(item.name);                            \r\n                    listItem.appendChild(span); \r\n\r\n                    listItem.addEventListener('click', function () {\r\n                        searchInputRe.value = item.name;\r\n                        searchInputRe.dataset.id = item.id;\r\n                        searchInputRe.dataset.name = item.name;\r\n                        dropdownRe.style.display = 'none'; \/\/ Hide dropdown on selection\r\n                        newLoc = item.name;\r\n                    });\r\n\r\n                    dropdownRe.appendChild(listItem);\r\n                    focusableItems.push(listItem);\r\n                });\r\n            });\r\n        }\r\n\r\n        \/\/ Display the dropdown (only show if there are options to show)\r\n        dropdownRe.style.display = filteredOptions.length > 0 ? 'block' : 'none';\r\n    }\r\n\r\n    \/\/ Keyboard navigation\r\n    searchInputRe.addEventListener(\"keydown\", function (e) {\r\n        \/\/ Handle first Enter keypress when dropdown is not visible\r\n        if (e.key === \"Enter\" && dropdown.style.display !== \"block\") {\r\n        e.preventDefault(); \/\/ Prevent form submission\r\n        filterOptions(); \/\/ Show options\r\n        dropdownRe.style.display = \"block\";\r\n        currentIndex = 0;\r\n        updateHighlight(); \/\/ or updateFocus()\r\n        return;\r\n        }\r\n\r\n        \/\/ If dropdown is not open or no items, stop here\r\n        if (dropdownRe.style.display !== \"block\" || focusableItems.length === 0)\r\n        return;\r\n\r\n        if (e.key === \"ArrowDown\") {\r\n        e.preventDefault(); \/\/ Prevent scroll BEFORE updating index\r\n        currentIndex = (currentIndex + 1) % focusableItems.length;\r\n        updateHighlight(); \/\/ or updateFocus()\r\n        } else if (e.key === \"ArrowUp\") {\r\n        e.preventDefault(); \/\/ Prevent scroll BEFORE updating index\r\n        currentIndex =\r\n            (currentIndex - 1 + focusableItems.length) % focusableItems.length;\r\n        updateHighlight(); \/\/ or updateFocus()\r\n        } else if (e.key === \"Enter\") {\r\n        if (currentIndex >= 0 && focusableItems[currentIndex]) {\r\n            focusableItems[currentIndex].click(); \/\/ Simulate click\r\n            e.preventDefault(); \/\/ Prevent form submit\r\n        }\r\n        } else if (e.key === \"Escape\") {\r\n        dropdownRe.style.display = \"none\";\r\n        currentIndex = -1;\r\n        e.preventDefault();\r\n        }\r\n    });\r\n\r\n     function updateHighlight() {\r\n        focusableItems.forEach((item, index) => {\r\n        if (index === currentIndex) {\r\n            item.classList.add(\"bg-orange-200\");\r\n            item.scrollIntoView({ block: \"nearest\", behavior: \"instant\" }); \/\/ instant scroll to avoid sluggishness\r\n        } else {\r\n            item.classList.remove(\"bg-orange-200\");\r\n        }\r\n        });\r\n    }\r\n\r\n    \/\/ Trigger dropdown only when input is clicked\r\n    searchInputRe.addEventListener('click', function (event) {\r\n        searchInputRe.value = '';     \/\/ Clear the input field when clicking again\r\n        event.stopPropagation(); \/\/ Prevent the label from triggering the dropdown\r\n        filterOptionsRe(); \/\/ Call the filterOptions function on click\r\n        dropdownRe.style.display = 'block'; \/\/ Show the dropdown\r\n        departErrorRe.classList.add('hidden');\r\n        searchInputRe.classList.remove('border-red-500');\r\n    });\r\n\r\n    \/\/ Filter options when the user types in the input\r\n    searchInputRe.addEventListener('input', function () {\r\n        filterOptionsRe();\r\n    });\r\n\r\n    \/\/ Close the dropdown when clicking outside (but not when clicking the input)\r\n    document.addEventListener('click', function (event) {\r\n        \/\/ if (!event.target.closest('.dropdown-container')) {\r\n        \/\/     dropdown.style.display = 'none'; \/\/ Hide the dropdown if clicking outside\r\n        \/\/ }\r\n            \/\/ Check if the clicked element is outside the input or dropdown\r\n        if (!event.target.closest('#input') && !event.target.closest('#dropdownRe')) {\r\n            dropdownRe.style.display = 'none'; \/\/ Hide the dropdown if clicking outside\r\n\r\n            if(newLoc === ''){\r\n                searchInputRe.value = localStorage.getItem(\"from\");\r\n            }\r\n            else {\r\n                searchInputRe.value = newLoc;\r\n            }\r\n        }\r\n    });\r\n\r\n    \/\/ Add event listener for focus events on all input fields\r\n    document.querySelectorAll('input').forEach(inputField => {\r\n        inputField.addEventListener('focus', function () {\r\n            dropdownRe.style.display = 'none'; \/\/ Hide the dropdown when any input field is focused\r\n        });\r\n    });\r\n\r\n    \/\/End Dropdown--------------------------------------------------------------------------------------\r\n\r\n    \/\/Seat Depart Popup Close\r\n    \/\/document.getElementById(\"backButton\").addEventListener(\"click\", function() {\r\n    \/\/    document.getElementById(\"mobilePopupDepart\").classList.add(\"hidden\");\r\n\r\n   \/\/     Array.from(document.getElementsByClassName(\"spinnerLoading\")).forEach(el => {\r\n   \/\/         el.remove();\r\n   \/\/     });\r\n\r\n   \/\/ }); \r\n\r\n    \/\/ Optional: close icon (\u00d7)\r\n    document.getElementById(\"closePopupBtn\").addEventListener(\"click\", function() {\r\n        document.getElementById(\"mobilePopupDepart\").classList.add(\"hidden\");\r\n\r\n        Array.from(document.getElementsByClassName(\"spinnerLoading\")).forEach(el => {\r\n            el.remove();\r\n        });\r\n    });\r\n\r\n    \/\/For Floating Filter \r\n\r\n    const openFilterPopup = document.getElementById('openFilterPopupBtn');\r\n    const openSortPopup = document.getElementById('openSortPopupBtn');\r\n    const tripDepart = document.getElementById('tripListDepart');\r\n    const tripReturn= document.getElementById('tripListReturn');\r\n    const closeFilterPopupD = document.getElementById('closeFilterPopupBtnDepart');\r\n    const closeSortPopupD = document.getElementById('closeSortBtnDepart');\r\n    const closeFilterPopupR = document.getElementById('closeFilterPopupBtnReturn');\r\n    const closeSortPopupR = document.getElementById('closeSortBtnReturn');            \r\n    let filterPopup;\r\n    let sortPopup; \r\n\r\n    openFilterPopup.addEventListener('click', () => { \r\n        if(tripDepart.classList.contains('hidden')){\r\n            filterPopup = document.getElementById('filterPopupReturn');\r\n        }\r\n        else{\r\n            filterPopup = document.getElementById('filterPopupDepart');\r\n        }\r\n        filterPopup.classList.remove('translate-y-full');\r\n        filterPopup.classList.add('translate-y-0');            \r\n    });               \r\n    \r\n    closeFilterPopupD.addEventListener('click', () => {\r\n        filterPopup.classList.remove('translate-y-0');\r\n        filterPopup.classList.add('translate-y-full');\r\n    });          \r\n    \r\n    openSortPopup.addEventListener('click', () => {\r\n         if(tripDepart.classList.contains('hidden')){\r\n            sortPopup = document.getElementById('sortPopupReturn');\r\n        }\r\n        else{\r\n            sortPopup = document.getElementById('sortPopupDepart');\r\n        }\r\n        sortPopup.classList.remove('translate-y-full');\r\n        sortPopup.classList.add('translate-y-0');       \r\n    });  \r\n\r\n    closeSortPopupD.addEventListener('click', () => { \r\n        sortPopup.classList.remove('translate-y-0');\r\n        sortPopup.classList.add('translate-y-full');\r\n    });\r\n\r\n    if(\"\".length > 0){\r\n        closeFilterPopupR.addEventListener('click', () => {\r\n            filterPopup.classList.remove('translate-y-0');\r\n            filterPopup.classList.add('translate-y-full');\r\n        });\r\n\r\n        closeSortPopupR.addEventListener('click', () => {               \r\n            sortPopup.classList.remove('translate-y-0');\r\n            sortPopup.classList.add('translate-y-full');\r\n        });\r\n    }          \r\n\r\n            \/\/END NEW SLIDER\r\n\r\n            \/\/New Filter\r\n            \/\/Reset Filters\r\n            function resetFilters() {\r\n                \/\/ Reset Date picker\r\n                document.getElementById(\"date\").value = \"\";\r\n                \r\n                \/\/ Reset Price Range\r\n                document.getElementById(\"price\").value = 500; \/\/ Reset to default middle value (you can change this to any default)\r\n                \r\n                \/\/ Reset Airline Dropdown\r\n                document.getElementById(\"airline\").value = \"All Airlines\";\r\n            }\r\n\r\n            \/\/ Function to apply filters (for illustration, the implementation is just logging values)\r\n            function applyFilteres() {\r\n                const date = document.getElementById(\"date\").value;\r\n                const price = document.getElementById(\"price\").value;\r\n                const airline = document.getElementById(\"airline\").value;\r\n            }\r\n\r\n            \/\/ Function to toggle the display of additional trip information\r\n        \r\n            \/\/End New Filter  \r\n\r\n            \/\/Check Element\r\n            function checkElementExist(id) {\r\n                const element = document.getElementById(id);\r\n                return element !== null;\r\n            }\r\n\r\n            \/\/Scrolling Mechanism\r\n\r\n            let lastScrollTop = 0;\r\n            if(checkElementExist(\"mobileSearchBar\")) {\r\n                const searchBar = document.getElementById(\"mobileSearchBar\");\r\n                    window.addEventListener(\"scroll\", () => {\r\n                    const currentScroll = window.pageYOffset || document.documentElement.scrollTop;\r\n                    \/\/For Scrolling\r\n                    \/\/if (currentScroll > lastScrollTop) {\r\n                    if (currentScroll === 0) {\r\n                    \/\/ Scrolling down\r\n                    searchBar.classList.remove(\"-translate-y-full\");\r\n                    } else {\r\n                    \/\/ Scrolling up\r\n                    searchBar.classList.add(\"-translate-y-full\");\r\n                    }\r\n\r\n                    lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;\r\n                });\r\n\r\n                if(checkElementExist(\"wpadminbar\")){\r\n                    \/\/document.getElementById(\"mobileSearchBar\").classList.add(\"pt-14\");\r\n                     document.getElementById(\"mobileSearchBar\").classList.remove(\"top-12\");\r\n                    document.getElementById(\"mobileSearchBar\").classList.add(\"top-24\");\r\n                }\r\n\r\n                const searchTripBtn = document.getElementById(\"modifySearchM\");\r\n                const searchTrip = document.getElementById(\"searchTripPopupM\");\r\n                const closeTripBtn = document.getElementById(\"closeTripPopupM\");\r\n\r\n                searchTripBtn.addEventListener(\"click\", () => {\r\n                    searchTrip.classList.remove(\"translate-y-full\");\r\n                    searchTrip.classList.add(\"translate-y-0\");\r\n\r\n                    let filteredOptions = [];\r\n                    let newLoc = \"\";\r\n\r\n                    const searchInputRe = document.getElementById(\"departFromReM\");\r\n                    const dropdownRe = document.getElementById(\"dropdownReM\");\r\n                    const departErrorRe = document.getElementById(\"departErrorReM\");\r\n                    const destinationInputRe = document.getElementById(\"departToReM\");\r\n                    searchInputRe.value = \"\";\r\n                    searchInputRe.dataset.name = \"\";\r\n                    searchInputRe.dataset.id = ;     \r\n\r\n                    document.addEventListener(\"DOMContentLoaded\", () => {\r\n                        val(\"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjbGllbnRfaWQiOiI0OSIsInN1YiI6IjQxY2NjNGQ0LTY2NDQtNDMzZS1hMDQ4LTA4ZGRmZmM4MmMwYiIsInVzZXJfdHlwZSI6Ikd1ZXN0IiwiZGV2aWNlX2lkIjoiYjg5ZDAxNTYtNGE5MC00ZTJiLTg1OTUtMDhkZGZmYzgyYzE5IiwiaWF0IjoxNzc2Nzg5NDM0LCJleHAiOjE3NzY3OTAzMzQsImlzcyI6Imh0dHBzOi8vMTAuMjAuMjAxLjExOjEwNyIsImF1ZCI6Imh0dHBzOi8vMTAuMjAuMjAxLjExOjEwNyJ9.oTwHmDcHfcg1ZJH8tg-WDG4xL6Xma-3cjauKonjeXj4\", true);         \r\n                    });          \r\n\r\n                    setTimeout(() => {\r\n                        destinationInputRe.value = \"\";\r\n                        destinationInputRe.dataset.name = \"\";\r\n                        destinationInputRe.dataset.id = ;\r\n                    }, 2000);  \r\n \r\n\r\n                    \/\/ Helper function to standardize the name case\r\n                    function standardizeNameCase(name) {\r\n                        return name.replace(\/([a-zA-Z0-9]+(?: [a-zA-Z0-9]+)*)(?: \\(([^)]+)\\))?\/g, (match, mainText, parenthesisText) => {\r\n                            const standardizedMainText = mainText.split(\" \")\r\n                                .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())\r\n                                .join(\" \");\r\n\r\n                            const standardizedParenthesisText = parenthesisText ? \r\n                                parenthesisText.split(\" \")\r\n                                    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())\r\n                                    .join(\" \") : \"\";\r\n\r\n                            return standardizedParenthesisText ? `${standardizedMainText} (${standardizedParenthesisText})` : standardizedMainText;\r\n                        });\r\n                    }\r\n\r\n\r\n                    function filterOptionsReM() {\r\n                        const searchValue = searchInputRe.value.toLowerCase();\r\n\r\n                        \/\/ fetch(\"\/wp-admin\/admin-ajax.php?action=get_all_location_transient\")\r\n                        \/\/ .then(res => res.json())\r\n                        \/\/ .then(data => {\r\n                        \/\/     console.log(\"Fetched from transient:\", data);                      \r\n                        \/\/     const filteredOptions = JSON.parse(data).filter(item => \r\n                        \/\/         item.name.toLowerCase().includes(searchValue) || \r\n                        \/\/         item.states.toLowerCase().includes(searchValue) ||\r\n                        \/\/         item.code.toLowerCase().includes(searchValue)\r\n                        \/\/     );\r\n                        \/\/ });\r\n\r\n                        filteredOptions = [{\"id\":23,\"code\":\"BTG\",\"name\":\"Bentong\",\"states\":\"Pahang\"},{\"id\":215,\"code\":\"TBA\",\"name\":\"Taman Bendahara\",\"states\":\"Kelantan\"},{\"id\":69,\"code\":\"KLG\",\"name\":\"Klang\",\"states\":\"Selangor\"},{\"id\":192,\"code\":\"SL\",\"name\":\"Selising\",\"states\":\"Kelantan\"},{\"id\":209,\"code\":\"PMH\",\"name\":\"Pasir Tumboh\",\"states\":\"Kelantan\"},{\"id\":278,\"code\":\"STH\",\"name\":\"SUNGAI TERAH\",\"states\":\"Kelantan\"},{\"id\":315,\"code\":\"CKJ\",\"name\":\"Changkat Jering\",\"states\":\"Perak\"},{\"id\":169,\"code\":\"TIN\",\"name\":\"Teluk Intan\",\"states\":\"Perak\"},{\"id\":132,\"code\":\"RPJG\",\"name\":\"Rantau Panjang\",\"states\":\"Kelantan\"},{\"id\":109,\"code\":\"NLI\",\"name\":\"Nilai\",\"states\":\"Negeri Sembilan\"},{\"id\":89,\"code\":\"KTN\",\"name\":\"Kuantan\",\"states\":\"Pahang\"},{\"id\":338,\"code\":\"TKGS\",\"name\":\"Terminal Kuching Sentral\",\"states\":\"Sarawak\"},{\"id\":195,\"code\":\"GTG\",\"name\":\"Genting Highlands\",\"states\":\"Pahang\"},{\"id\":3,\"code\":\"AS\",\"name\":\"Alor Setar\",\"states\":\"Kedah\"},{\"id\":152,\"code\":\"SKD\",\"name\":\"Skudai\",\"states\":\"Johor\"},{\"id\":295,\"code\":\"SLR\",\"name\":\"Balok(Sungai Ular)\",\"states\":\"Pahang\"},{\"id\":189,\"code\":\"RWG\",\"name\":\"Rawang\",\"states\":\"Selangor\"},{\"id\":335,\"code\":\"SPSK\",\"name\":\"Simpang Saratok\",\"states\":\"Sarawak\"},{\"id\":212,\"code\":\"PMS\",\"name\":\"Permaisuri\",\"states\":\"Terengganu\"},{\"id\":235,\"code\":\"PSA\",\"name\":\"Pokok Sena\",\"states\":\"Kedah\"},{\"id\":172,\"code\":\"TRI\",\"name\":\"Triang\",\"states\":\"Pahang\"},{\"id\":66,\"code\":\"KRT\",\"name\":\"Kertih\",\"states\":\"Terengganu\"},{\"id\":229,\"code\":\"KDK\",\"name\":\"Kadok\",\"states\":\"Kelantan\"},{\"id\":275,\"code\":\"KBH\",\"name\":\"KUALA BALAH\",\"states\":\"Kelantan\"},{\"id\":318,\"code\":\"HUNZ\",\"name\":\"Hospital Unisza\",\"states\":\"Terengganu\"},{\"id\":126,\"code\":\"PTN\",\"name\":\"Pontian\",\"states\":\"Johor\"},{\"id\":26,\"code\":\"BJL\",\"name\":\"Bukit Jalil\",\"states\":\"Kuala Lumpur\"},{\"id\":129,\"code\":\"PCDG\",\"name\":\"Pulai Condong\",\"states\":\"Kelantan\"},{\"id\":106,\"code\":\"MR\",\"name\":\"Muar\",\"states\":\"Johor\"},{\"id\":63,\"code\":\"KMTG\",\"name\":\"Kamunting\",\"states\":\"Perak\"},{\"id\":255,\"code\":\"HGM\",\"name\":\"Hentian Gua Musang\",\"states\":\"Kelantan\"},{\"id\":43,\"code\":\"GRC\",\"name\":\"Guar Chempedak\",\"states\":\"Kedah\"},{\"id\":292,\"code\":\"CLK\",\"name\":\"Chalok\",\"states\":\"Terengganu\"},{\"id\":49,\"code\":\"JPK\",\"name\":\"Jalan Pekeliling\",\"states\":\"Kuala Lumpur\"},{\"id\":298,\"code\":\"SCLK\",\"name\":\"Setiu(Chalok Kedai)\",\"states\":\"Terengganu\"},{\"id\":261,\"code\":\"BT6\",\"name\":\"Batu 6\",\"states\":\"Terengganu\"},{\"id\":238,\"code\":\"KMK\",\"name\":\"Kemasik\",\"states\":\"Terengganu\"},{\"id\":92,\"code\":\"LBS\",\"name\":\"Labis\",\"states\":\"Johor\"},{\"id\":115,\"code\":\"PGDG\",\"name\":\"Pasir Gudang\",\"states\":\"Johor\"},{\"id\":161,\"code\":\"TP\",\"name\":\"Taiping\",\"states\":\"Perak\"},{\"id\":29,\"code\":\"BKP\",\"name\":\"Bukit Payung\",\"states\":\"Terengganu\"},{\"id\":175,\"code\":\"WKFT\",\"name\":\"Wakaf Tapai\",\"states\":\"Terengganu\"},{\"id\":324,\"code\":\"TBG\",\"name\":\"Terminal Bersepadu Gombak\",\"states\":\"Selangor\"},{\"id\":221,\"code\":\"TMK\",\"name\":\"Tanjung Gemok\",\"states\":\"Johor\"},{\"id\":75,\"code\":\"KTT\",\"name\":\"Kota Tinggi\",\"states\":\"Johor\"},{\"id\":344,\"code\":\"OBS\",\"name\":\"Singapore(Oxley Bizhub)\",\"states\":\"Singapore\"},{\"id\":158,\"code\":\"SP\",\"name\":\"Sungai Petani\",\"states\":\"Kedah\"},{\"id\":244,\"code\":\"TAMN\",\"name\":\"Tun Aminah\",\"states\":\"Johor\"},{\"id\":52,\"code\":\"JGK\",\"name\":\"Jengka\",\"states\":\"Pahang\"},{\"id\":95,\"code\":\"LMT\",\"name\":\"Lumut\",\"states\":\"Perak\"},{\"id\":72,\"code\":\"KB\",\"name\":\"Kota Bharu\",\"states\":\"Kelantan\"},{\"id\":118,\"code\":\"PKN\",\"name\":\"Pekan\",\"states\":\"Pahang\"},{\"id\":258,\"code\":\"CRTG\",\"name\":\"Cherating\",\"states\":\"Pahang\"},{\"id\":264,\"code\":\"ISKJ\",\"name\":\"Seri Iskandar(J)\",\"states\":\"Johor\"},{\"id\":281,\"code\":\"LGG\",\"name\":\"LENGGONG\",\"states\":\"Perak\"},{\"id\":78,\"code\":\"KBST\",\"name\":\"Kuala Besut\",\"states\":\"Terengganu\"},{\"id\":218,\"code\":\"UJL\",\"name\":\"UMK Jeli\",\"states\":\"Kelantan\"},{\"id\":327,\"code\":\"MYY\",\"name\":\"Terminal Bas Miri\",\"states\":\"Sarawak\"},{\"id\":321,\"code\":\"USM\",\"name\":\"USM Pulau Pinang\",\"states\":\"Pulau Pinang\"},{\"id\":12,\"code\":\"BSR\",\"name\":\"Bagan Serai\",\"states\":\"Perak\"},{\"id\":178,\"code\":\"NLM\",\"name\":\"Nilam Puri\",\"states\":\"Kelantan\"},{\"id\":35,\"code\":\"CHN\",\"name\":\"Chini\",\"states\":\"Pahang\"},{\"id\":135,\"code\":\"SBM\",\"name\":\"Sabak Bernam\",\"states\":\"Selangor\"},{\"id\":112,\"code\":\"PRP\",\"name\":\"Pantai Remis\",\"states\":\"Perak\"},{\"id\":55,\"code\":\"JTH\",\"name\":\"Jertih\",\"states\":\"Terengganu\"},{\"id\":304,\"code\":\"PBP\",\"name\":\"Paka(Balai Polis)\",\"states\":\"Terengganu\"},{\"id\":241,\"code\":\"TPT\",\"name\":\"Tumpat\",\"states\":\"Kelantan\"},{\"id\":98,\"code\":\"MSI\",\"name\":\"Masai\",\"states\":\"Johor\"},{\"id\":144,\"code\":\"SIK\",\"name\":\"Sik\",\"states\":\"Kedah\"},{\"id\":167,\"code\":\"TKY\",\"name\":\"Tasik Kenyir\",\"states\":\"Terengganu\"},{\"id\":330,\"code\":\"TTU\",\"name\":\"Tatau\",\"states\":\"Sarawak\"},{\"id\":307,\"code\":\"KBKS\",\"name\":\"Kota Bharu - Kota Seri Bong\",\"states\":\"Kelantan\"},{\"id\":230,\"code\":\"BBG\",\"name\":\"Bukit Bunga\",\"states\":\"Kelantan\"},{\"id\":313,\"code\":\"SEC13\",\"name\":\"Seksyen 13 Shah Alam\",\"states\":\"Selangor\"},{\"id\":21,\"code\":\"BG\",\"name\":\"Batu Gajah\",\"states\":\"Perak\"},{\"id\":121,\"code\":\"PG\",\"name\":\"Penang(SG Nibong)\",\"states\":\"Pulau Pinang\"},{\"id\":273,\"code\":\"ARWNA\",\"name\":\"Genting Awana\",\"states\":\"Pahang\"},{\"id\":250,\"code\":\"MRN\",\"name\":\"Maran\",\"states\":\"Pahang\"},{\"id\":58,\"code\":\"JJY\",\"name\":\"Johor Jaya\",\"states\":\"Johor\"},{\"id\":81,\"code\":\"KRI\",\"name\":\"Kuala Krai\",\"states\":\"Kelantan\"},{\"id\":64,\"code\":\"KGR\",\"name\":\"Kangar\",\"states\":\"Perlis\"},{\"id\":207,\"code\":\"LLH\",\"name\":\"Laloh\",\"states\":\"Kelantan\"},{\"id\":44,\"code\":\"GRN\",\"name\":\"Gurun\",\"states\":\"Kedah\"},{\"id\":293,\"code\":\"SGT2\",\"name\":\"Segamat(KFC Tmn Yayasan)\",\"states\":\"Johor\"},{\"id\":141,\"code\":\"ISK\",\"name\":\"Seri Iskandar\",\"states\":\"Perak\"},{\"id\":187,\"code\":\"UTR\",\"name\":\"Ulu Tiram\",\"states\":\"Johor\"},{\"id\":164,\"code\":\"TKRG\",\"name\":\"Tanjung Karang\",\"states\":\"Selangor\"},{\"id\":287,\"code\":\"WTB\",\"name\":\"Wakaf Tengah\",\"states\":\"Terengganu\"},{\"id\":310,\"code\":\"PTLG\",\"name\":\"Pasir Tumboh(SK Long Gafar)\",\"states\":\"Kelantan\"},{\"id\":210,\"code\":\"PHL\",\"name\":\"Pauh Lima\",\"states\":\"Kelantan\"},{\"id\":333,\"code\":\"SBTG\",\"name\":\"Simpang Bintangor\",\"states\":\"Sarawak\"},{\"id\":270,\"code\":\"SMPL\",\"name\":\"Simpang Pulai\",\"states\":\"Perak\"},{\"id\":224,\"code\":\"UMT\",\"name\":\"Universiti Malaysia Terengganu\",\"states\":\"Terengganu\"},{\"id\":124,\"code\":\"PHU\",\"name\":\"Pengkalan Hulu\",\"states\":\"Perak\"},{\"id\":84,\"code\":\"KNR\",\"name\":\"Kuala Nerang\",\"states\":\"Kedah\"},{\"id\":227,\"code\":\"klia2\",\"name\":\"Kuala Lumpur International Airport 2\",\"states\":\"Selangor\"},{\"id\":204,\"code\":\"JLT\",\"name\":\"Jelawat\",\"states\":\"Kelantan\"},{\"id\":61,\"code\":\"KPR\",\"name\":\"Kampar\",\"states\":\"Perak\"},{\"id\":41,\"code\":\"GK\",\"name\":\"Grik\",\"states\":\"Perak\"},{\"id\":290,\"code\":\"PNK\",\"name\":\"Penarik\",\"states\":\"Terengganu\"},{\"id\":247,\"code\":\"PLH\",\"name\":\"Paloh\",\"states\":\"Kelantan\"},{\"id\":213,\"code\":\"CTK\",\"name\":\"PPK Chetok\",\"states\":\"Kelantan\"},{\"id\":336,\"code\":\"SPBG\",\"name\":\"Simpang Betong\",\"states\":\"Sarawak\"},{\"id\":236,\"code\":\"MRG\",\"name\":\"Marang\",\"states\":\"Terengganu\"},{\"id\":259,\"code\":\"CHDRG\",\"name\":\"Chendering\",\"states\":\"Terengganu\"},{\"id\":113,\"code\":\"PBT\",\"name\":\"Parit Buntar\",\"states\":\"Perak\"},{\"id\":27,\"code\":\"BKH\",\"name\":\"Bukit Kayu Hitam\",\"states\":\"Kedah\"},{\"id\":276,\"code\":\"JWG\",\"name\":\"JELAWANG (GUNUNG STONG)\",\"states\":\"Kelantan\"},{\"id\":319,\"code\":\"MYT\",\"name\":\"Mydin Tunjong\",\"states\":\"Kelantan\"},{\"id\":322,\"code\":\"BGO\",\"name\":\"Bagan Datuk\",\"states\":\"Perak\"},{\"id\":173,\"code\":\"ULDU\",\"name\":\"Uitm Lendu\",\"states\":\"Melaka\"},{\"id\":156,\"code\":\"SGB\",\"name\":\"Sungai Besar\",\"states\":\"Selangor\"},{\"id\":130,\"code\":\"PNG\",\"name\":\"Penang\",\"states\":\"Pulau Pinang\"},{\"id\":87,\"code\":\"KRP\",\"name\":\"Kuala Rompin\",\"states\":\"Pahang\"},{\"id\":256,\"code\":\"GUNG\",\"name\":\"Bachok-Gunong\",\"states\":\"Kelantan\"},{\"id\":7,\"code\":\"AHJ\",\"name\":\"Ayer Hitam(J)\",\"states\":\"Johor\"},{\"id\":299,\"code\":\"STO\",\"name\":\"Setiu(sg. Tong)\",\"states\":\"Terengganu\"},{\"id\":342,\"code\":\"SRN\",\"name\":\"Terminal Bas Serian\",\"states\":\"Sarawak\"},{\"id\":150,\"code\":\"WLD\",\"name\":\"Singapore Woodlands\",\"states\":\"Singapore\"},{\"id\":24,\"code\":\"BD\",\"name\":\"Bidor\",\"states\":\"Perak\"},{\"id\":47,\"code\":\"IPH\",\"name\":\"Ipoh\",\"states\":\"Perak\"},{\"id\":70,\"code\":\"KLU\",\"name\":\"Kluang\",\"states\":\"Johor\"},{\"id\":239,\"code\":\"DPM\",\"name\":\"Depo Mutiara\",\"states\":\"Kelantan\"},{\"id\":216,\"code\":\"TKM\",\"name\":\"Teluk Mesira\",\"states\":\"Kelantan\"},{\"id\":233,\"code\":\"SLY\",\"name\":\"Selayang(JPN Gombak)\",\"states\":\"Selangor\"},{\"id\":30,\"code\":\"BTW\",\"name\":\"Butterworth\",\"states\":\"Pulau Pinang\"},{\"id\":279,\"code\":\"ALS\",\"name\":\"Ayer Lanas\",\"states\":\"Kelantan\"},{\"id\":316,\"code\":\"BKM\",\"name\":\"Bukit Merah\",\"states\":\"Perak\"},{\"id\":170,\"code\":\"TLH\",\"name\":\"Temerloh\",\"states\":\"Pahang\"},{\"id\":176,\"code\":\"YP\",\"name\":\"Yong Peng\",\"states\":\"Johor\"},{\"id\":153,\"code\":\"SMNJG\",\"name\":\"Sri Manjung\",\"states\":\"Perak\"},{\"id\":110,\"code\":\"PGH\",\"name\":\"Pagoh\",\"states\":\"Johor\"},{\"id\":10,\"code\":\"ATP\",\"name\":\"Ayer Tawar\",\"states\":\"Perak\"},{\"id\":133,\"code\":\"RAUB\",\"name\":\"Raub\",\"states\":\"Pahang\"},{\"id\":196,\"code\":\"KLIA\",\"name\":\"Kuala Lumpur International Airport\",\"states\":\"Selangor\"},{\"id\":90,\"code\":\"KLA\",\"name\":\"Kulai\",\"states\":\"Johor\"},{\"id\":253,\"code\":\"MEG\",\"name\":\"Mercang\",\"states\":\"Terengganu\"},{\"id\":96,\"code\":\"MCHG\",\"name\":\"Machang\",\"states\":\"Kelantan\"},{\"id\":142,\"code\":\"STWN\",\"name\":\"Sitiawan\",\"states\":\"Perak\"},{\"id\":282,\"code\":\"SBH\",\"name\":\"SUNGAI BULOH\",\"states\":\"Selangor\"},{\"id\":288,\"code\":\"RSA\",\"name\":\"Rusila\",\"states\":\"Terengganu\"},{\"id\":305,\"code\":\"MMEG\",\"name\":\"Marang(Merchang)\",\"states\":\"Terengganu\"},{\"id\":219,\"code\":\"UMP\",\"name\":\"UMP\",\"states\":\"Pahang\"},{\"id\":79,\"code\":\"KKSR\",\"name\":\"Kuala Kangsar\",\"states\":\"Perak\"},{\"id\":328,\"code\":\"BNH\",\"name\":\"Batu Niah\",\"states\":\"Sarawak\"},{\"id\":265,\"code\":\"FWH\",\"name\":\"First World Hotel\",\"states\":\"Pahang\"},{\"id\":179,\"code\":\"KLS\",\"name\":\"KL Sentral\",\"states\":\"Kuala Lumpur\"},{\"id\":205,\"code\":\"KRJ\",\"name\":\"Kg. Raja\",\"states\":\"Terengganu\"},{\"id\":13,\"code\":\"BAH\",\"name\":\"Bahau\",\"states\":\"Negeri Sembilan\"},{\"id\":136,\"code\":\"SGT\",\"name\":\"Segamat\",\"states\":\"Johor\"},{\"id\":242,\"code\":\"WZN\",\"name\":\"Wakaf Zain\",\"states\":\"Kelantan\"},{\"id\":56,\"code\":\"JTR\",\"name\":\"Jitra\",\"states\":\"Kedah\"},{\"id\":199,\"code\":\"DPG\",\"name\":\"Kuala Krai(D.Peladang)\",\"states\":\"Kelantan\"},{\"id\":99,\"code\":\"MT\",\"name\":\"Masjid Tanah\",\"states\":\"Melaka\"},{\"id\":285,\"code\":\"PKG\",\"name\":\"Marang(Pulau Kerengga)\",\"states\":\"Terengganu\"},{\"id\":116,\"code\":\"PMAS\",\"name\":\"Pasir Mas\",\"states\":\"Kelantan\"},{\"id\":139,\"code\":\"SDG\",\"name\":\"Serdang\",\"states\":\"Kedah\"},{\"id\":162,\"code\":\"TMH\",\"name\":\"Tanah Merah\",\"states\":\"Kelantan\"},{\"id\":325,\"code\":\"HOP\",\"name\":\"Hotel Perdana\",\"states\":\"Kelantan\"},{\"id\":122,\"code\":\"PDG\",\"name\":\"Pendang\",\"states\":\"Kedah\"},{\"id\":76,\"code\":\"KROH\",\"name\":\"Kroh\",\"states\":\"Perak\"},{\"id\":202,\"code\":\"CKU\",\"name\":\"Chiku 3\",\"states\":\"Kelantan\"},{\"id\":225,\"code\":\"DNK\",\"name\":\"Danok\",\"states\":\"Thailand\"},{\"id\":33,\"code\":\"CLN\",\"name\":\"Changlun\",\"states\":\"Kedah\"},{\"id\":39,\"code\":\"GPG\",\"name\":\"Gopeng\",\"states\":\"Perak\"},{\"id\":16,\"code\":\"BPR\",\"name\":\"Bandar Penawar\",\"states\":\"Johor\"},{\"id\":182,\"code\":\"JSN\",\"name\":\"Jasin\",\"states\":\"Melaka\"},{\"id\":159,\"code\":\"SGRT\",\"name\":\"Sungai Rengit\",\"states\":\"Johor\"},{\"id\":302,\"code\":\"MKM\",\"name\":\"Kemasik(MesraMall)\",\"states\":\"Terengganu\"},{\"id\":165,\"code\":\"TGM\",\"name\":\"Tanjung Malim\",\"states\":\"Perak\"},{\"id\":211,\"code\":\"PGT\",\"name\":\"Peringat\",\"states\":\"Kelantan\"},{\"id\":188,\"code\":\"PCHG\",\"name\":\"Puchong\",\"states\":\"Selangor\"},{\"id\":311,\"code\":\"TPNG\",\"name\":\"Depo Naza(Tapang)\",\"states\":\"Kelantan\"},{\"id\":334,\"code\":\"SBLT\",\"name\":\"Simpang Bulat\",\"states\":\"Sarawak\"},{\"id\":125,\"code\":\"PKBR\",\"name\":\"Pengkalan Kubor\",\"states\":\"Kelantan\"},{\"id\":65,\"code\":\"KMM\",\"name\":\"Kemaman\",\"states\":\"Terengganu\"},{\"id\":317,\"code\":\"AOP\",\"name\":\"Alor Pongsu\",\"states\":\"Perak\"},{\"id\":171,\"code\":\"KB1\",\"name\":\"Terminal Tesco(kb)\",\"states\":\"Kelantan\"},{\"id\":25,\"code\":\"BKB\",\"name\":\"Bukit Beruntung\",\"states\":\"Selangor\"},{\"id\":271,\"code\":\"CMHG\",\"name\":\"Cameron Highlands\",\"states\":\"Pahang\"},{\"id\":105,\"code\":\"MZS\",\"name\":\"Muadzam Shah\",\"states\":\"Pahang\"},{\"id\":228,\"code\":\"UMC\",\"name\":\"Uitm Machang\",\"states\":\"Kelantan\"},{\"id\":85,\"code\":\"KP\",\"name\":\"Kuala Perlis\",\"states\":\"Perlis\"},{\"id\":62,\"code\":\"KGKH\",\"name\":\"Kampung Koh\",\"states\":\"Perak\"},{\"id\":42,\"code\":\"GMSG\",\"name\":\"Gua Musang\",\"states\":\"Kelantan\"},{\"id\":291,\"code\":\"KBB\",\"name\":\"Bari\",\"states\":\"Terengganu\"},{\"id\":254,\"code\":\"KJL\",\"name\":\"Kijal\",\"states\":\"Terengganu\"},{\"id\":248,\"code\":\"PJL\",\"name\":\"Politeknik Jeli\",\"states\":\"Kelantan\"},{\"id\":148,\"code\":\"SGP\",\"name\":\"Singapore\",\"states\":\"Singapore\"},{\"id\":168,\"code\":\"TBS\",\"name\":\"Terminal Bersepadu Selatan\",\"states\":\"Kuala Lumpur\"},{\"id\":191,\"code\":\"ST\",\"name\":\"Setiu\",\"states\":\"Terengganu\"},{\"id\":331,\"code\":\"SSLG\",\"name\":\"Simpang Selangau\",\"states\":\"Sarawak\"},{\"id\":231,\"code\":\"UNISZA\",\"name\":\"UNISZA\",\"states\":\"Terengganu\"},{\"id\":128,\"code\":\"PDR\",\"name\":\"Puduraya\",\"states\":\"Kuala Lumpur\"},{\"id\":22,\"code\":\"BPT\",\"name\":\"Batu Pahat\",\"states\":\"Johor\"},{\"id\":274,\"code\":\"STGH\",\"name\":\"Simpang Tenggaroh\",\"states\":\"Johor\"},{\"id\":82,\"code\":\"KLI\",\"name\":\"Kuala Lipis\",\"states\":\"Pahang\"},{\"id\":88,\"code\":\"KT\",\"name\":\"Kuala Terengganu\",\"states\":\"Terengganu\"},{\"id\":208,\"code\":\"PCR\",\"name\":\"Panchor\",\"states\":\"Kelantan\"},{\"id\":337,\"code\":\"SJLK\",\"name\":\"Simpang Jelukong\",\"states\":\"Sarawak\"},{\"id\":45,\"code\":\"HDT\",\"name\":\"Hentian Duta\",\"states\":\"Kuala Lumpur\"},{\"id\":294,\"code\":\"KMH\",\"name\":\"Kemahang\",\"states\":\"Kelantan\"},{\"id\":145,\"code\":\"SG\",\"name\":\"Simpang\",\"states\":\"Perak\"},{\"id\":2,\"code\":\"ALG\",\"name\":\"Alor Gajah\",\"states\":\"Melaka\"},{\"id\":48,\"code\":\"IPHMG\",\"name\":\"Ipoh(medan Gopeng)\",\"states\":\"Perak\"},{\"id\":71,\"code\":\"KLNS\",\"name\":\"Kok Lanas\",\"states\":\"Kelantan\"},{\"id\":117,\"code\":\"PTH\",\"name\":\"Pasir Puteh\",\"states\":\"Kelantan\"},{\"id\":240,\"code\":\"GEM\",\"name\":\"Gemas\",\"states\":\"Negeri Sembilan\"},{\"id\":257,\"code\":\"GMC\",\"name\":\"Gemenceh\",\"states\":\"Negeri Sembilan\"},{\"id\":280,\"code\":\"SMP\",\"name\":\"Simpang Taiping\",\"states\":\"Perak\"},{\"id\":31,\"code\":\"CHA\",\"name\":\"Chaah\",\"states\":\"Johor\"},{\"id\":217,\"code\":\"TBL\",\"name\":\"Tok Bali\",\"states\":\"Kelantan\"},{\"id\":154,\"code\":\"SPTR\",\"name\":\"Sri Putri\",\"states\":\"Johor\"},{\"id\":134,\"code\":\"RPN\",\"name\":\"Rompin\",\"states\":\"Pahang\"},{\"id\":11,\"code\":\"BCK\",\"name\":\"Bachok\",\"states\":\"Kelantan\"},{\"id\":111,\"code\":\"PAKA\",\"name\":\"Paka\",\"states\":\"Terengganu\"},{\"id\":54,\"code\":\"JRT\",\"name\":\"Jerantut\",\"states\":\"Pahang\"},{\"id\":303,\"code\":\"IKM\",\"name\":\"Kemasik(IKBN)\",\"states\":\"Terengganu\"},{\"id\":91,\"code\":\"KLM\",\"name\":\"Kulim\",\"states\":\"Kedah\"},{\"id\":214,\"code\":\"PCG\",\"name\":\"Puchong Prima\",\"states\":\"Selangor\"},{\"id\":237,\"code\":\"TMNU\",\"name\":\"Taman U\",\"states\":\"Johor\"},{\"id\":260,\"code\":\"BTS\",\"name\":\"Berjaya Times Square\",\"states\":\"Kuala Lumpur\"},{\"id\":283,\"code\":\"DMAI\",\"name\":\"Damansara Damai\",\"states\":\"Selangor\"},{\"id\":220,\"code\":\"EDU\",\"name\":\"Endau\",\"states\":\"Johor\"},{\"id\":114,\"code\":\"PRJ\",\"name\":\"Parit Raja\",\"states\":\"Johor\"},{\"id\":68,\"code\":\"KTH\",\"name\":\"Ketereh\",\"states\":\"Kelantan\"},{\"id\":277,\"code\":\"MRT\",\"name\":\"MERANTO\",\"states\":\"Kelantan\"},{\"id\":28,\"code\":\"BM\",\"name\":\"Bukit Mertajam\",\"states\":\"Pulau Pinang\"},{\"id\":323,\"code\":\"PLH2\",\"name\":\"Paloh 2\",\"states\":\"Kelantan\"},{\"id\":174,\"code\":\"UUM\",\"name\":\"Uum Sintok\",\"states\":\"Kedah\"},{\"id\":74,\"code\":\"KSS\",\"name\":\"Kota Sarang Semut\",\"states\":\"Kedah\"},{\"id\":320,\"code\":\"UTM\",\"name\":\"UTM Skudai\",\"states\":\"Johor\"},{\"id\":131,\"code\":\"PTJ\",\"name\":\"Putrajaya\",\"states\":\"Kuala Lumpur\"},{\"id\":137,\"code\":\"SKC\",\"name\":\"Sekinchan\",\"states\":\"Selangor\"},{\"id\":51,\"code\":\"JELI\",\"name\":\"Jeli\",\"states\":\"Kelantan\"},{\"id\":300,\"code\":\"MTZ\",\"name\":\"K. Terengganu (Msd Terapung)\",\"states\":\"Terengganu\"},{\"id\":151,\"code\":\"BNLAY\",\"name\":\"Singapore(Boon Lay)\",\"states\":\"Singapore\"},{\"id\":194,\"code\":\"HDY\",\"name\":\"Hatyai\",\"states\":\"Thailand\"},{\"id\":200,\"code\":\"MLR\",\"name\":\"Melor\",\"states\":\"Kelantan\"},{\"id\":343,\"code\":\"JUR\",\"name\":\"Singapore(Jurong East)\",\"states\":\"Singapore\"},{\"id\":309,\"code\":\"KSEL\",\"name\":\"Kuala Selangor\",\"states\":\"Selangor\"},{\"id\":286,\"code\":\"GBL\",\"name\":\"GONG BALAI\",\"states\":\"Terengganu\"},{\"id\":263,\"code\":\"AJIL\",\"name\":\"Ajil\",\"states\":\"Terengganu\"},{\"id\":140,\"code\":\"SBN\",\"name\":\"Seremban\",\"states\":\"Negeri Sembilan\"},{\"id\":163,\"code\":\"TGK\",\"name\":\"Tangkak\",\"states\":\"Johor\"},{\"id\":332,\"code\":\"SBW\",\"name\":\"Terminal Bas Sibu\",\"states\":\"Sarawak\"},{\"id\":77,\"code\":\"KBRG\",\"name\":\"Kuala Berang\",\"states\":\"Terengganu\"},{\"id\":17,\"code\":\"BTR\",\"name\":\"Keratong\",\"states\":\"Pahang\"},{\"id\":326,\"code\":\"SGC\",\"name\":\"Singapore(Grantral Complex)\",\"states\":\"Singapore\"},{\"id\":269,\"code\":\"JLTNG\",\"name\":\"Jelutong\",\"states\":\"Pulau Pinang\"},{\"id\":123,\"code\":\"PCPA\",\"name\":\"Pengkalan Chepa\",\"states\":\"Kelantan\"},{\"id\":60,\"code\":\"KJG\",\"name\":\"Kajang\",\"states\":\"Selangor\"},{\"id\":83,\"code\":\"KL\",\"name\":\"Kuala Lumpur\",\"states\":\"Kuala Lumpur\"},{\"id\":34,\"code\":\"CMR\",\"name\":\"Chemor\",\"states\":\"Perak\"},{\"id\":40,\"code\":\"GWD\",\"name\":\"Greenword\",\"states\":\"Selangor\"},{\"id\":183,\"code\":\"MRLM\",\"name\":\"Merlimau\",\"states\":\"Melaka\"},{\"id\":160,\"code\":\"SSPT\",\"name\":\"Sungai Siput\",\"states\":\"Perak\"},{\"id\":103,\"code\":\"MSG\",\"name\":\"Mersing\",\"states\":\"Johor\"},{\"id\":289,\"code\":\"MER\",\"name\":\"Merang\",\"states\":\"Terengganu\"},{\"id\":97,\"code\":\"MNJG\",\"name\":\"Manjung\",\"states\":\"Perak\"},{\"id\":143,\"code\":\"SA\",\"name\":\"Shah Alam\",\"states\":\"Selangor\"},{\"id\":120,\"code\":\"PGK\",\"name\":\"Penang(komtar)\",\"states\":\"Pulau Pinang\"},{\"id\":166,\"code\":\"TPH\",\"name\":\"Tapah\",\"states\":\"Perak\"},{\"id\":329,\"code\":\"BTU\",\"name\":\"Terminal Bas Bintulu\",\"states\":\"Sarawak\"},{\"id\":80,\"code\":\"KTL\",\"name\":\"Kuala Ketil\",\"states\":\"Kedah\"},{\"id\":57,\"code\":\"JB\",\"name\":\"Johor Bahru\",\"states\":\"Johor\"},{\"id\":206,\"code\":\"KKN\",\"name\":\"Kubang Kerian\",\"states\":\"Kelantan\"},{\"id\":14,\"code\":\"BLG\",\"name\":\"Baling\",\"states\":\"Kedah\"},{\"id\":37,\"code\":\"DGN\",\"name\":\"Dungun\",\"states\":\"Terengganu\"},{\"id\":243,\"code\":\"TPN\",\"name\":\"Tampin\",\"states\":\"Negeri Sembilan\"},{\"id\":100,\"code\":\"MLK\",\"name\":\"Melaka\",\"states\":\"Melaka\"}].filter(\r\n                        (item) =>\r\n                            item.name.toLowerCase().includes(searchValue) ||\r\n                            item.states.toLowerCase().includes(searchValue) ||\r\n                            item.code.toLowerCase().includes(searchValue)\r\n                        );  \r\n\r\n                        filteredOptions.sort((a, b) => {\r\n                            const statesCompare = a.states.toLowerCase().localeCompare(b.states.toLowerCase());\r\n                            if (statesCompare !== 0) {\r\n                                return statesCompare;  \/\/ Sort by genre if different\r\n                            }\r\n                            return a.name.toLowerCase().localeCompare(b.name.toLowerCase());  \/\/ Sort by name within the same genre\r\n                        });\r\n\r\n                        const groupedOptions = filteredOptions.reduce((groups, item) => {\r\n                            const states = item.states || \"Other\";\r\n                            if (!groups[states]) {\r\n                                groups[states] = [];\r\n                            }\r\n                            groups[states].push(item);\r\n                            return groups;\r\n                        }, {});\r\n\r\n                        \/\/ Clear the dropdown list\r\n                        dropdownRe.innerHTML = \"\";\r\n\r\n                        if (filteredOptions.length === 0) {\r\n                            const noResultsMessage = document.createElement(\"div\");\r\n                            noResultsMessage.classList.add(\"no-results\");\r\n                            noResultsMessage.textContent = \"No results found\";\r\n                            dropdownRe.appendChild(noResultsMessage);\r\n                        } else {\r\n                            \/\/ Create optgroups and list items for the grouped options\r\n                            Object.keys(groupedOptions).forEach(states => {\r\n                                const optgroup = document.createElement(\"div\");\r\n                                optgroup.classList.add(\"dropdown-item\", \"font-semibold\");\r\n                                optgroup.textContent = states;\r\n                                dropdownRe.appendChild(optgroup);\r\n\r\n                                \/\/ Create list items for each genre group\r\n                                groupedOptions[states].forEach(item => {\r\n                                    const listItem = document.createElement(\"div\");\r\n                                    listItem.classList.add(\"dropdown-item\");\r\n                                    listItem.setAttribute(\"data-id\", item.id);\r\n                                    listItem.setAttribute(\"data-name\", item.name);\r\n                                    listItem.setAttribute(\"data-type\", \"item\");\r\n                                    \r\n                                    const span = document.createElement(\"span\");\r\n                                    span.textContent = standardizeNameCase(item.name);                                \r\n                                    listItem.appendChild(span);\r\n\r\n                                    listItem.addEventListener(\"click\", function () {\r\n                                        searchInputRe.value = item.name;\r\n                                        searchInputRe.dataset.id = item.id;\r\n                                        searchInputRe.dataset.name = item.name;\r\n                                        dropdownRe.style.display = \"none\"; \/\/ Hide dropdown on selection\r\n                                        newLoc = item.name;\r\n                                    });\r\n\r\n                                    dropdownRe.appendChild(listItem);\r\n                                });\r\n                            });\r\n                        }\r\n\r\n                        \/\/ Display the dropdown (only show if there are options to show)\r\n                        dropdownRe.style.display = filteredOptions.length > 0 ? \"block\" : \"none\";\r\n                    }\r\n\r\n                    \/\/ Trigger dropdown only when input is clicked\r\n                    searchInputRe.addEventListener(\"click\", function (event) {\r\n                        searchInputRe.value = \"\";     \/\/ Clear the input field when clicking again\r\n                        event.stopPropagation(); \/\/ Prevent the label from triggering the dropdown\r\n                        filterOptionsReM(); \/\/ Call the filterOptions function on click\r\n                        dropdownRe.style.display = \"block\"; \/\/ Show the dropdown\r\n                        departErrorRe.classList.add(\"hidden\");\r\n                        searchInputRe.classList.remove(\"border-red-500\");\r\n                    });\r\n\r\n                    \/\/ Filter options when the user types in the input\r\n                    searchInputRe.addEventListener(\"input\", function () {\r\n                        filterOptionsReM();\r\n                    });\r\n\r\n                    \/\/ Close the dropdown when clicking outside (but not when clicking the input)\r\n                    document.addEventListener(\"click\", function (event) {\r\n                        \/\/ if (!event.target.closest(\".dropdown-container\")) {\r\n                        \/\/     dropdown.style.display = \"none\"; \/\/ Hide the dropdown if clicking outside\r\n                        \/\/ }\r\n                            \/\/ Check if the clicked element is outside the input or dropdown\r\n                        if (!event.target.closest(\"#input\") && !event.target.closest(\"#dropdownReM\")) {\r\n                            dropdownRe.style.display = \"none\"; \/\/ Hide the dropdown if clicking outside\r\n                        }\r\n\r\n                        if(newLoc === \"\"){\r\n                            searchInputRe.value = localStorage.getItem(\"from\");\r\n                        }\r\n                        else {\r\n                            searchInputRe.value = newLoc;\r\n                        }\r\n                    });\r\n\r\n                    \/\/ Add event listener for focus events on all input fields\r\n                    document.querySelectorAll(\"input\").forEach(inputField => {\r\n                        inputField.addEventListener(\"focus\", function () {\r\n                            dropdownRe.style.display = \"none\"; \/\/ Hide the dropdown when any input field is focused\r\n                        });\r\n                    });\r\n\r\n                    var newDateReM = \"\";\r\n\r\n                    flatpickr(\"#fromDateReM\", {\r\n                    dateFormat: \"d-m-Y\",\r\n                    minDate: \"today\",\r\n                    maxDate: new Date().fp_incr(90),\r\n                    defaultDate: savedFromDate,\r\n                    locale: {\r\n                        firstDayOfWeek: 1,\r\n                    },\r\n                    onChange: function (selectedDates, dateStr, instance) {\r\n                        newDateReM = dateStr;\r\n                        toPickerReM.set(\"minDate\", dateStr);\r\n                    },\r\n                    disableMobile: true,\r\n                    });\r\n\r\n                    var toPickerReM = flatpickr(\"#toDateReM\", {\r\n                    dateFormat: \"d-m-Y\",\r\n                    minDate: toDateMin,\r\n                    maxDate: toDateMin.fp_incr(30),\r\n                    defaultDate: savedToDate,\r\n                    locale: {\r\n                        firstDayOfWeek: 1,\r\n                    },\r\n                    onChange: function (selectedDates, dateStr, instance) {\r\n                        \/\/console.log(\"Selected date:\", dateStr);\r\n                    },\r\n                    disableMobile: true,\r\n                    });\r\n                });                  \r\n                \r\n                closeTripBtn.addEventListener(\"click\", () => { \r\n                    searchTrip.classList.remove(\"translate-y-0\");\r\n                    searchTrip.classList.add(\"translate-y-full\");\r\n                });\r\n            }  \r\n            \/\/Sorting----------------------------------------------------------------------------\r\n            document.addEventListener(\"DOMContentLoaded\", function() {\r\n                const containerD = document.getElementById(\"tripListDepart\");\r\n                const containerR = document.getElementById(\"tripListReturn\");\r\n                const sortTripD = document.getElementById(\"sortingTripDepart\");\r\n                const sortTripR = document.getElementById(\"sortingTripReturn\");\r\n                const sortTripMD = document.querySelectorAll(\"input[name='mobileSortTripD']\");\r\n                const sortTripMR = document.querySelectorAll(\"input[name='mobileSortTripR']\");\r\n      \r\n                function parseTimeHHMM(str) {\r\n                    if (!str) return Number.POSITIVE_INFINITY;\r\n                    const s = str.toString().padStart(4, \"0\"); \/\/ \"930\" -> \"0930\"\r\n                    const h = parseInt(s.slice(0, 2), 10);\r\n                    const m = parseInt(s.slice(2, 4), 10);\r\n                    return h * 60 + m;\r\n                }\r\n\r\n                function sortTrips(by) {\r\n                    let trips;\r\n                    if(containerD.classList.contains(\"hidden\")){\r\n                        trips = Array.from(containerR.querySelectorAll(\"[data-bus]\"));\r\n                    }\r\n                    else {\r\n                        trips = Array.from(containerD.querySelectorAll(\"[data-bus]\"));\r\n                    }\r\n                    let sorted = trips.sort((a, b) => {\r\n                        if (by === \"price\") {\r\n                            return parseFloat(a.dataset.price) - parseFloat(b.dataset.price);\r\n                        }\r\n                        \/\/ default = time\r\n                        return parseTimeHHMM(a.dataset.time) - parseTimeHHMM(b.dataset.time);\r\n                    });\r\n\r\n                    \/\/ Fade out \u2192 reorder \u2192 fade in\r\n                    trips.forEach(el => el.style.transition = \"opacity 150ms\");\r\n                    trips.forEach(el => el.style.opacity = \"0\");\r\n\r\n                    setTimeout(() => {\r\n                        if(containerD.classList.contains(\"hidden\")){\r\n                            sorted.forEach(el => containerR.appendChild(el));\r\n                        }else {\r\n                            sorted.forEach(el => containerD.appendChild(el));\r\n                        }\r\n                        sorted.forEach(el => el.style.opacity = \"1\");\r\n                    }, 160);\r\n                }\r\n\r\n                \/\/ Initial sort by time (default)\r\n                \/\/sortTrips(\"time\");\r\n\r\n                \/\/ Trigger when dropdown changes\/radio changes\r\n\r\n                if (mobileView.matches) {\r\n                    sortTripMD.forEach(radio => {\r\n                        radio.addEventListener(\"change\", function() {\r\n                            if (this.checked) {\r\n                                sortTrips(this.value);\r\n                            }\r\n                        });\r\n                    });\r\n\r\n                    sortTripMR.forEach(radio => {\r\n                        radio.addEventListener(\"change\", function() {\r\n                            if (this.checked) {\r\n                                sortTrips(this.value);\r\n                            }\r\n                        });\r\n                    });\r\n\r\n                } else {\r\n\r\n                    if(sortTripD) {\r\n                        sortTripD.addEventListener(\"change\", function() {\r\n                            sortTrips(this.value);\r\n                        });\r\n                    }\r\n\r\n                    if(returnDataCheck && returnDataCheck.length > 0 ) {\r\n                        sortTripR.addEventListener(\"change\", function() {\r\n                            sortTrips(this.value);\r\n                        });\r\n                    }\r\n                }         \r\n            });            \r\n            \/\/---------------------------------------------------------------------------\r\n            \/\/For Accent\r\n            const sliders = document.querySelectorAll(`input[type=\"range\"]`);\r\n\r\n            sliders.forEach(slider => {\r\n            function updateFill() {\r\n                const value = (slider.value - slider.min) \/ (slider.max - slider.min) * 100;\r\n                slider.style.backgroundSize = value + \"% 100%\";\r\n            }\r\n            slider.addEventListener(\"input\", updateFill);\r\n            updateFill();\r\n            });\r\n            \/\/---------------------------------------------------------------------------\r\n        <\/script>\r\n    \r\n    <\/body>","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-1064","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Trip List - ETicketing<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/eticketing.my\/ms\/seatview\/\" \/>\n<meta property=\"og:locale\" content=\"ms_MY\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Trip List - ETicketing\" \/>\n<meta property=\"og:url\" content=\"https:\/\/eticketing.my\/ms\/seatview\/\" \/>\n<meta property=\"og:site_name\" content=\"ETicketing\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/eticketing.myy\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-27T04:03:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/eticketing.my\/wp-content\/uploads\/2025\/08\/Special-Discount.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@eticketing_my\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/eticketing.my\/seatview\/\",\"url\":\"https:\/\/eticketing.my\/seatview\/\",\"name\":\"Trip List - ETicketing\",\"isPartOf\":{\"@id\":\"https:\/\/eticketing.my\/#website\"},\"datePublished\":\"2024-09-30T08:34:59+00:00\",\"dateModified\":\"2024-12-27T04:03:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/eticketing.my\/seatview\/#breadcrumb\"},\"inLanguage\":\"ms-MY\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/eticketing.my\/seatview\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/eticketing.my\/seatview\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/eticketing.my\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Trip List\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/eticketing.my\/#website\",\"url\":\"https:\/\/eticketing.my\/\",\"name\":\"ETicketing\",\"description\":\"Beli Tiket Bas Online. Mudah dan Murah.\",\"publisher\":{\"@id\":\"https:\/\/eticketing.my\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/eticketing.my\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ms-MY\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/eticketing.my\/#organization\",\"name\":\"ETicketing\",\"url\":\"https:\/\/eticketing.my\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ms-MY\",\"@id\":\"https:\/\/eticketing.my\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/eticketing.my\/wp-content\/uploads\/2025\/08\/Logo-Apps-Eticketing-Finalize-01-01.png\",\"contentUrl\":\"https:\/\/eticketing.my\/wp-content\/uploads\/2025\/08\/Logo-Apps-Eticketing-Finalize-01-01.png\",\"width\":300,\"height\":90,\"caption\":\"ETicketing\"},\"image\":{\"@id\":\"https:\/\/eticketing.my\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/eticketing.myy\",\"https:\/\/x.com\/eticketing_my\",\"https:\/\/www.tiktok.com\/@eticketing.my\",\"https:\/\/www.threads.com\/@eticketing.my\/\",\"https:\/\/www.instagram.com\/eticketing.my\/\",\"https:\/\/youtube.com\/@eticketing_my\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Trip List - ETicketing","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/eticketing.my\/ms\/seatview\/","og_locale":"ms_MY","og_type":"article","og_title":"Trip List - ETicketing","og_url":"https:\/\/eticketing.my\/ms\/seatview\/","og_site_name":"ETicketing","article_publisher":"https:\/\/www.facebook.com\/eticketing.myy","article_modified_time":"2024-12-27T04:03:17+00:00","og_image":[{"width":1080,"height":576,"url":"https:\/\/eticketing.my\/wp-content\/uploads\/2025\/08\/Special-Discount.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@eticketing_my","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/eticketing.my\/seatview\/","url":"https:\/\/eticketing.my\/seatview\/","name":"Trip List - ETicketing","isPartOf":{"@id":"https:\/\/eticketing.my\/#website"},"datePublished":"2024-09-30T08:34:59+00:00","dateModified":"2024-12-27T04:03:17+00:00","breadcrumb":{"@id":"https:\/\/eticketing.my\/seatview\/#breadcrumb"},"inLanguage":"ms-MY","potentialAction":[{"@type":"ReadAction","target":["https:\/\/eticketing.my\/seatview\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/eticketing.my\/seatview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eticketing.my\/"},{"@type":"ListItem","position":2,"name":"Trip List"}]},{"@type":"WebSite","@id":"https:\/\/eticketing.my\/#website","url":"https:\/\/eticketing.my\/","name":"ETicketing","description":"Beli Tiket Bas Online. Mudah dan Murah.","publisher":{"@id":"https:\/\/eticketing.my\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/eticketing.my\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ms-MY"},{"@type":"Organization","@id":"https:\/\/eticketing.my\/#organization","name":"ETicketing","url":"https:\/\/eticketing.my\/","logo":{"@type":"ImageObject","inLanguage":"ms-MY","@id":"https:\/\/eticketing.my\/#\/schema\/logo\/image\/","url":"https:\/\/eticketing.my\/wp-content\/uploads\/2025\/08\/Logo-Apps-Eticketing-Finalize-01-01.png","contentUrl":"https:\/\/eticketing.my\/wp-content\/uploads\/2025\/08\/Logo-Apps-Eticketing-Finalize-01-01.png","width":300,"height":90,"caption":"ETicketing"},"image":{"@id":"https:\/\/eticketing.my\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/eticketing.myy","https:\/\/x.com\/eticketing_my","https:\/\/www.tiktok.com\/@eticketing.my","https:\/\/www.threads.com\/@eticketing.my\/","https:\/\/www.instagram.com\/eticketing.my\/","https:\/\/youtube.com\/@eticketing_my"]}]}},"_links":{"self":[{"href":"https:\/\/eticketing.my\/ms\/wp-json\/wp\/v2\/pages\/1064","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eticketing.my\/ms\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eticketing.my\/ms\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eticketing.my\/ms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eticketing.my\/ms\/wp-json\/wp\/v2\/comments?post=1064"}],"version-history":[{"count":0,"href":"https:\/\/eticketing.my\/ms\/wp-json\/wp\/v2\/pages\/1064\/revisions"}],"wp:attachment":[{"href":"https:\/\/eticketing.my\/ms\/wp-json\/wp\/v2\/media?parent=1064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}