{"id":1103,"date":"2025-09-11T14:04:13","date_gmt":"2025-09-11T14:04:13","guid":{"rendered":"https:\/\/user6.delovna.finki.ukim.mk\/wp-booking-calendar\/"},"modified":"2025-09-13T16:02:57","modified_gmt":"2025-09-13T16:02:57","slug":"wp-booking-calendar","status":"publish","type":"page","link":"https:\/\/user6.delovna.finki.ukim.mk\/mk\/wp-booking-calendar\/","title":{"rendered":"Booking Form"},"content":{"rendered":"<p class=\"wp-block-paragraph\">    <form id=\"train-filter\" style=\"margin-bottom:1em;\" action=\"\">\n        <label>\u041e\u0434:\n            <select id=\"fromCity\">\n                <option value=\"\">-- choose --<\/option>\n                                    <option value=\"Skopje\">\u0421\u043a\u043e\u043f\u0458\u0435<\/option>\n                                    <option value=\"Bitola\">\u0411\u0438\u0442\u043e\u043b\u0430<\/option>\n                                    <option value=\"Veles\">\u0412\u0435\u043b\u0435\u0441<\/option>\n                                    <option value=\"Gevgelija\">\u0413\u0435\u0432\u0433\u0435\u043b\u0438\u0458\u0430<\/option>\n                                    <option value=\"Kumanovo\">\u041a\u0443\u043c\u0430\u043d\u043e\u0432\u043e<\/option>\n                            <\/select>\n        <\/label>\n        <label>\u0414\u043e:\n            <select id=\"toCity\">\n                <option value=\"\">-- choose --<\/option>\n                                    <option value=\"Skopje\">\u0421\u043a\u043e\u043f\u0458\u0435<\/option>\n                                    <option value=\"Bitola\">\u0411\u0438\u0442\u043e\u043b\u0430<\/option>\n                                    <option value=\"Veles\">\u0412\u0435\u043b\u0435\u0441<\/option>\n                                    <option value=\"Gevgelija\">\u0413\u0435\u0432\u0433\u0435\u043b\u0438\u0458\u0430<\/option>\n                                    <option value=\"Kumanovo\">\u041a\u0443\u043c\u0430\u043d\u043e\u0432\u043e<\/option>\n                            <\/select>\n        <\/label>\n    <input type=\"hidden\" name=\"trp-form-language\" value=\"mk\"\/><\/form>\n\n    <table id=\"results\" border=\"1\" cellpadding=\"6\">\n        <thead>\n            <tr>\n                <th>\u041e\u0434<\/th><th>\u0414\u043e<\/th><th>\u0412\u0440\u0435\u043c\u0435\u0442\u0440\u0430\u0435\u045a\u0435<\/th><th>\u0426\u0435\u043d\u0430<\/th><th>\u041f\u043e\u0430\u0453\u0430\u045a\u0435<\/th>\n            <\/tr>\n        <\/thead>\n        <tbody>\n                            <tr data-from=\"Skopje\"\n                    data-to=\"Bitola\"\n                    data-price=\"300 MKD\"\n                    data-departures=\"06:42,10:30,14:15\">\n                    <td>\u0421\u043a\u043e\u043f\u0458\u0435<\/td>\n                    <td>\u0411\u0438\u0442\u043e\u043b\u0430<\/td>\n                    <td>\u2248 3\u0447 30\u043c<\/td>\n                    <td>300 \u0434\u0435\u043d.<\/td>\n                    <td>06:42, 10:30, 14:15<\/td>\n                <\/tr>\n                            <tr data-from=\"Skopje\"\n                    data-to=\"Veles\"\n                    data-price=\"120 MKD\"\n                    data-departures=\"07:00,12:15,16:30\">\n                    <td>\u0421\u043a\u043e\u043f\u0458\u0435<\/td>\n                    <td>\u0412\u0435\u043b\u0435\u0441<\/td>\n                    <td>\u2248 1\u0447<\/td>\n                    <td>120 \u0434\u0435\u043d.<\/td>\n                    <td>07:00, 12:15, 16:30<\/td>\n                <\/tr>\n                            <tr data-from=\"Skopje\"\n                    data-to=\"Gevgelija\"\n                    data-price=\"350 MKD\"\n                    data-departures=\"08:00,12:45,17:00\">\n                    <td>\u0421\u043a\u043e\u043f\u0458\u0435<\/td>\n                    <td>\u0413\u0435\u0432\u0433\u0435\u043b\u0438\u0458\u0430<\/td>\n                    <td>\u2248 4\u0447<\/td>\n                    <td>350 \u0434\u0435\u043d.<\/td>\n                    <td>08:00, 12:45, 17:00<\/td>\n                <\/tr>\n                            <tr data-from=\"Gevgelija\"\n                    data-to=\"Skopje\"\n                    data-price=\"350 MKD\"\n                    data-departures=\"05:15,10:00,15:45\">\n                    <td>\u0413\u0435\u0432\u0433\u0435\u043b\u0438\u0458\u0430<\/td>\n                    <td>\u0421\u043a\u043e\u043f\u0458\u0435<\/td>\n                    <td>\u2248 4\u0447<\/td>\n                    <td>350 \u0434\u0435\u043d.<\/td>\n                    <td>05:15, 10:00, 15:45<\/td>\n                <\/tr>\n                            <tr data-from=\"Gevgelija\"\n                    data-to=\"Bitola\"\n                    data-price=\"320 MKD\"\n                    data-departures=\"06:30,11:20,16:10\">\n                    <td>\u0413\u0435\u0432\u0433\u0435\u043b\u0438\u0458\u0430<\/td>\n                    <td>\u0411\u0438\u0442\u043e\u043b\u0430<\/td>\n                    <td>\u2248 4\u0447 30\u043c<\/td>\n                    <td>320  \u0434\u0435\u043d.<\/td>\n                    <td>06:30, 11:20, 16:10<\/td>\n                <\/tr>\n                            <tr data-from=\"Bitola\"\n                    data-to=\"Skopje\"\n                    data-price=\"300 MKD\"\n                    data-departures=\"06:00,11:00,15:30\">\n                    <td>\u0411\u0438\u0442\u043e\u043b\u0430<\/td>\n                    <td>\u0421\u043a\u043e\u043f\u0458\u0435<\/td>\n                    <td>\u2248 3\u0447 30\u043c<\/td>\n                    <td>300 \u0434\u0435\u043d.<\/td>\n                    <td>06:00, 11:00, 15:30<\/td>\n                <\/tr>\n                            <tr data-from=\"Bitola\"\n                    data-to=\"Veles\"\n                    data-price=\"180 MKD\"\n                    data-departures=\"07:10,12:40,16:50\">\n                    <td>\u0411\u0438\u0442\u043e\u043b\u0430<\/td>\n                    <td>\u0412\u0435\u043b\u0435\u0441<\/td>\n                    <td>\u2248 2\u0447 15\u0447<\/td>\n                    <td>180  \u0434\u0435\u043d.<\/td>\n                    <td>07:10, 12:40, 16:50<\/td>\n                <\/tr>\n                            <tr data-from=\"Veles\"\n                    data-to=\"Skopje\"\n                    data-price=\"120 MKD\"\n                    data-departures=\"06:30,10:45,15:00\">\n                    <td>\u0412\u0435\u043b\u0435\u0441<\/td>\n                    <td>\u0421\u043a\u043e\u043f\u0458\u0435<\/td>\n                    <td>\u2248 1\u0447<\/td>\n                    <td>120 \u0434\u0435\u043d.<\/td>\n                    <td>06:30, 10:45, 15:00<\/td>\n                <\/tr>\n                            <tr data-from=\"Veles\"\n                    data-to=\"Bitola\"\n                    data-price=\"180 MKD\"\n                    data-departures=\"08:00,13:00,17:15\">\n                    <td>\u0412\u0435\u043b\u0435\u0441<\/td>\n                    <td>\u0411\u0438\u0442\u043e\u043b\u0430<\/td>\n                    <td>\u2248 2\u0447 15\u0447<\/td>\n                    <td>180  \u0434\u0435\u043d.<\/td>\n                    <td>08:00, 13:00, 17:15<\/td>\n                <\/tr>\n                            <tr data-from=\"Kumanovo\"\n                    data-to=\"Skopje\"\n                    data-price=\"100 MKD\"\n                    data-departures=\"07:20,12:00,16:40\">\n                    <td>\u041a\u0443\u043c\u0430\u043d\u043e\u0432\u043e<\/td>\n                    <td>\u0421\u043a\u043e\u043f\u0458\u0435<\/td>\n                    <td>\u2248 45\u043c<\/td>\n                    <td>100  \u0434\u0435\u043d.<\/td>\n                    <td>07:20, 12:00, 16:40<\/td>\n                <\/tr>\n                            <tr data-from=\"Kumanovo\"\n                    data-to=\"Veles\"\n                    data-price=\"160 MKD\"\n                    data-departures=\"08:00,13:15,17:30\">\n                    <td>\u041a\u0443\u043c\u0430\u043d\u043e\u0432\u043e<\/td>\n                    <td>\u0412\u0435\u043b\u0435\u0441<\/td>\n                    <td>\u2248 1\u0447 30\u043c<\/td>\n                    <td>160  \u0434\u0435\u043d.<\/td>\n                    <td>08:00, 13:15, 17:30<\/td>\n                <\/tr>\n                    <\/tbody>\n    <\/table>\n\n    <!-- Buy Ticket Button -->\n    <div id=\"buy-ticket-container\" style=\"display:none; margin-top:10px;\">\n        <button type=\"button\" id=\"show-ticket-form\">\u041a\u0443\u043f\u0438 \u0431\u0438\u043b\u0435\u0442<\/button>\n    <\/div>\n\n    <div id=\"ticket-form\" style=\"display:none; margin-top:20px; border:1px solid #ccc; padding:10px;\">\n        <h3>\u041a\u0443\u043f\u0438 \u0431\u0438\u043b\u0435\u0442<\/h3>\n        <p id=\"selected-route\"><\/p>\n        <form id=\"purchase-form\" action=\"\">\n            <label>\u0418\u043c\u0435: <input type=\"text\" name=\"name\" required><\/label><br><br>\n            <label>\u0415-\u043f\u043e\u0448\u0442\u0430: <input type=\"email\" name=\"email\" required><\/label><br><br>\n            <label>\u0412\u0440\u0435\u043c\u0435 \u043d\u0430 \u0442\u0440\u0433\u043d\u0443\u0432\u0430\u045a\u0435:\n                <select name=\"departure\" id=\"departure-time\" required><\/select>\n            <\/label><br><br>\n            <label>\u0411\u0440\u043e\u0458 \u043d\u0430 \u0431\u0438\u043b\u0435\u0442\u0438: <input type=\"number\" name=\"tickets\" min=\"1\" value=\"1\" required><\/label><br><br>\n            <p id=\"total-price\"><\/p>\n            <label>\u0411\u0440\u043e\u0458 \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u0447\u043a\u0430: <input type=\"text\" name=\"card_number\" maxlength=\"16\" placeholder=\"1234 5678 9012 3456\" required><\/label><br><br>\n            <label>\u0418\u0441\u0442\u0435\u043a\u0443\u0432\u0430\u045a\u0435 (MM\/YY): <input type=\"text\" name=\"expiry\" maxlength=\"5\" placeholder=\"MM\/YY\" required><\/label><br><br>\n            <label>CVV: <input type=\"text\" name=\"cvv\" maxlength=\"4\" placeholder=\"123\" required><\/label><br><br>\n            <label>\u0426\u0435\u043d\u0430 \u043f\u043e \u0431\u0438\u043b\u0435\u0442: <span id=\"ticket-price\"><\/span><\/label><br><br>\n            <button type=\"submit\">\u0418\u0441\u043f\u0440\u0430\u0442\u0438<\/button>\n        <input type=\"hidden\" name=\"trp-form-language\" value=\"mk\"\/><\/form>\n\t\t\n        <p id=\"purchase-result\" style=\"color:green; font-weight:bold; font-size:18px; padding:30px 15px 15px 15px; border-radius:10px; text-align:center;\"><\/p>\n\n    <\/div>\n\n    <script>\n    let selectedRoute = null;\n\n    \/\/ Filter table rows by dropdown\n    document.querySelectorAll('#fromCity, #toCity').forEach(sel => {\n        sel.addEventListener('change', function(){\n            const from = document.getElementById('fromCity').value;\n            const to = document.getElementById('toCity').value;\n            selectedRoute = null;\n            document.querySelectorAll('#results tbody tr').forEach(row=>{\n                const matchFrom = !from || row.dataset.from === from;\n                const matchTo   = !to   || row.dataset.to === to;\n                row.style.display = (matchFrom && matchTo) ? '' : 'none';\n                if(matchFrom && matchTo) selectedRoute = row;\n            });\n\n            \/\/ Show Buy Ticket button only if a route is selected\n            document.getElementById('buy-ticket-container').style.display = selectedRoute ? 'block' : 'none';\n            document.getElementById('ticket-form').style.display = 'none';\n        });\n    });\n\n    \/\/ Show ticket form when Buy Ticket button clicked\n    document.getElementById('show-ticket-form').addEventListener('click', function(){\n        if(!selectedRoute) return;\n        const from = selectedRoute.dataset.from;\n        const to = selectedRoute.dataset.to;\n        const price = parseInt(selectedRoute.dataset.price);\n        const departures = selectedRoute.dataset.departures.split(',');\n\n        document.getElementById('ticket-form').style.display = 'block';\n        document.getElementById('selected-route').innerText = \"Route: \" + from + \" \u2192 \" + to;\n        document.getElementById('ticket-price').innerText = price;\n\n        \/\/ Fill departures dropdown\n        const depSelect = document.getElementById('departure-time');\n        depSelect.innerHTML = '';\n        departures.forEach(d => {\n            const opt = document.createElement('option');\n            opt.value = d;\n            opt.textContent = d;\n            depSelect.appendChild(opt);\n        });\n\n        updateTotal();\n    });\n\n    \/\/ Update total price dynamically\n    function updateTotal(){\n        const form = document.getElementById('purchase-form');\n        const price = parseInt(document.getElementById('ticket-price').innerText);\n        const tickets = parseInt(form.tickets.value) || 1;\n        document.getElementById('total-price').innerText = \"Total: \" + tickets + \" \u00d7 \" + price + \" = \" + (tickets * price);\n    }\n\n    document.getElementById('purchase-form').tickets.addEventListener('input', updateTotal);\n\n    \/\/ Handle form submission (demo only)\n    document.getElementById('purchase-form').addEventListener('submit', function(e){\n        e.preventDefault();\n        const form = e.target;\n        const name = form.name.value;\n        const email = form.email.value;\n        const tickets = form.tickets.value;\n        const departure = form.departure.value;\n        const totalText = document.getElementById('total-price').innerText;\n\t\t\n        document.getElementById('purchase-result').innerText = \n            `Thank you ${name}! You ordered ${tickets} ticket(s) for departure at ${departure}. ${totalText}. Payment info received.`;\n\n        form.reset();\n    });\n    <\/script>\n    <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"iawp_total_views":65,"footnotes":""},"class_list":["post-1103","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"user6","author_link":"https:\/\/user6.delovna.finki.ukim.mk\/mk\/author\/user6\/"},"uagb_comment_info":0,"uagb_excerpt":null,"_links":{"self":[{"href":"https:\/\/user6.delovna.finki.ukim.mk\/mk\/wp-json\/wp\/v2\/pages\/1103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/user6.delovna.finki.ukim.mk\/mk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/user6.delovna.finki.ukim.mk\/mk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/user6.delovna.finki.ukim.mk\/mk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/user6.delovna.finki.ukim.mk\/mk\/wp-json\/wp\/v2\/comments?post=1103"}],"version-history":[{"count":2,"href":"https:\/\/user6.delovna.finki.ukim.mk\/mk\/wp-json\/wp\/v2\/pages\/1103\/revisions"}],"predecessor-version":[{"id":1110,"href":"https:\/\/user6.delovna.finki.ukim.mk\/mk\/wp-json\/wp\/v2\/pages\/1103\/revisions\/1110"}],"wp:attachment":[{"href":"https:\/\/user6.delovna.finki.ukim.mk\/mk\/wp-json\/wp\/v2\/media?parent=1103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}