{"id":4498,"date":"2025-10-02T11:35:58","date_gmt":"2025-10-02T11:35:58","guid":{"rendered":"https:\/\/colonialtirana.com\/?page_id=4498"},"modified":"2025-10-05T21:02:33","modified_gmt":"2025-10-05T21:02:33","slug":"book-now","status":"publish","type":"page","link":"https:\/\/colonialtirana.com\/sq\/book-now\/","title":{"rendered":"BOOK now"},"content":{"rendered":"\n    <form id=\"gtr-reservation-form\" method=\"post\">\n        <div class=\"gtr-form-grid\">\n            <div class=\"gtr-form-group\">\n                <label for=\"gtr-name\">Emri-Mbiemri<\/label>\n                <input type=\"text\" id=\"gtr-name\" name=\"gtr-name\" placeholder=\"Name-Surname \/ Emri-Mbiemri\" required>\n            <\/div>\n            <div class=\"gtr-form-group\">\n                <label for=\"gtr-email\">Email:<\/label>\n                <input type=\"email\" id=\"gtr-email\" name=\"gtr-email\" placeholder=\"Email \/ Email\" required>\n            <\/div>\n            <div class=\"gtr-form-group\">\n                <label for=\"gtr-phone\">Tel:<\/label>\n                <input type=\"text\" id=\"gtr-phone\" name=\"gtr-phone\" placeholder=\"Phone \/ Tel\" required>\n            <\/div>\n            <div class=\"gtr-form-group\">\n                <label for=\"gtr-date\">Data:<\/label>\n                <input type=\"date\" id=\"gtr-date\" name=\"gtr-date\" placeholder=\"Date \/ Data\" required>\n            <\/div>\n            <div class=\"gtr-form-group\">\n                <label for=\"gtr-time\">Ora:<\/label>\n                <select id=\"gtr-time\" name=\"gtr-time\" required>\n                    <option value=\"\">-- Select time \/ Zgjidh or\u00ebn --<\/option>\n                    <option value=\"17:00\">17:00<\/option><option value=\"17:30\">17:30<\/option><option value=\"18:00\">18:00<\/option><option value=\"18:30\">18:30<\/option><option value=\"19:00\">19:00<\/option><option value=\"19:30\">19:30<\/option><option value=\"20:00\">20:00<\/option><option value=\"20:30\">20:30<\/option>                <\/select>\n            <\/div>\n\n            <div class=\"gtr-form-group\">\n                <label for=\"gtr-table\">Table\/Tavolia:<\/label>\n<select id=\"gtr-table\" name=\"gtr-table\" required>\n    <option value=\"\" disabled selected>-- Select Table \/ Zgjidh Tavolin\u00ebn --<\/option>\n    <option value=\"inside\">Inside<\/option>\n    <option value=\"outside\">Outside<\/option>\n<\/select>\n            <\/div>\n            \n            <div class=\"gtr-form-group\">\n                <label for=\"gtr-males\">Males \/ Meshkuj:<\/label>\n                <input type=\"number\" id=\"gtr-males\" name=\"gtr-males\" value=\"1\" min=\"0\" required>\n            <\/div>\n\n            <div class=\"gtr-form-group\">\n                <label for=\"gtr-females\">Females \/ Femra:<\/label>\n                <input type=\"number\" id=\"gtr-females\" name=\"gtr-females\" value=\"1\" min=\"0\" required>\n            <\/div>\n\n        <\/div>\n        \n        <div class=\"gtr-subscribe-container\">\n            <input type=\"checkbox\" id=\"gtr-subscribe\" name=\"gtr-subscribe\" value=\"1\">\n            <label for=\"gtr-subscribe\">Accept our messages! \/ Prano mesazhet tona!<\/label>\n        <\/div>\n\n        <button type=\"submit\" name=\"gtr-submit\" class=\"gtr-submit-button\">Rezervo<\/button>\n    <\/form>\n    \n    <div style=\"text-align: center; margin-top: 15px; font-size: 10px; color: #aaa;\">\n        Punoi: **Emanuel Elezi**\n    <\/div>\n    <style>\n        \/* Stilet CSS mbeten t\u00eb pandryshuara *\/\n        #gtr-reservation-form {\n            max-width: 900px;\n            margin: 0 auto;\n            padding: 40px;\n            border-radius: 15px;\n            background: #ffffff;\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\n            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n            transition: all 0.3s ease-in-out;\n        }\n        \/* Ndarja me Dy Kolona *\/\n        .gtr-form-grid {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: 25px;\n            margin-bottom: 25px;\n        }\n\n        @media (min-width: 768px) {\n            .gtr-form-grid {\n                grid-template-columns: repeat(2, 1fr); \n                gap: 40px;\n            }\n        }\n\n        \/* Grupet e Fushave *\/\n        .gtr-form-group {\n            display: flex;\n            flex-direction: column;\n        }\n        #gtr-reservation-form label {\n            font-weight: 600;\n            color: #333;\n            font-size: 15px;\n            margin-bottom: 8px;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n        }\n        \/* Stili i Inputeve dhe Selecteve *\/\n        #gtr-reservation-form input,\n        #gtr-reservation-form select {\n            width: 100%;\n            padding: 14px;\n            border: 1px solid #e0e0e0;\n            border-radius: 8px;\n            box-sizing: border-box;\n            font-size: 16px;\n            color: #555;\n            font-weight: 400;\n            background-color: #f9f9f9;\n            transition: border-color 0.3s ease, box-shadow 0.3s ease;\n        }\n\n        #gtr-reservation-form input:focus,\n        #gtr-reservation-form select:focus {\n            border-color: #007bff;\n            box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);\n            outline: none;\n            background-color: #fff;\n        }\n        \n        #gtr-reservation-form input[type=\"number\"] {\n            -moz-appearance: textfield; \n        }\n        #gtr-reservation-form input[type=\"number\"]::-webkit-outer-spin-button,\n        #gtr-reservation-form input[type=\"number\"]::-webkit-inner-spin-button {\n            -webkit-appearance: none; \n            margin: 0;\n        }\n        \/* Stili i Checkbox-it *\/\n        .gtr-subscribe-container {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            margin-top: 15px;\n        }\n        #gtr-reservation-form #gtr-subscribe {\n            width: 20px;\n            height: 20px;\n            cursor: pointer;\n            -webkit-appearance: none;\n            -moz-appearance: none;\n            appearance: none;\n            border: 2px solid #ccc;\n            border-radius: 4px;\n            position: relative;\n            transition: background-color 0.3s ease;\n        }\n        #gtr-reservation-form #gtr-subscribe:checked {\n            background-color: #007bff;\n            border-color: #007bff;\n        }\n        #gtr-reservation-form #gtr-subscribe:checked::after {\n            content: '\u2713';\n            color: #fff;\n            position: absolute;\n            left: 50%;\n            top: 50%;\n            transform: translate(-50%, -50%);\n            font-size: 14px;\n        }\n        .gtr-subscribe-container label {\n            margin: 0;\n            font-weight: 400;\n            color: #555;\n            text-transform: none;\n            letter-spacing: normal;\n        }\n        \/* Stili i Butonit *\/\n        .gtr-submit-button {\n            width: 100%;\n            padding: 16px 25px;\n            border: none;\n            border-radius: 8px;\n            cursor: pointer;\n            font-size: 18px;\n            font-weight: 700;\n            color: white;\n            background: linear-gradient(135deg, #007bff, #0056b3);\n            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);\n            transition: all 0.3s ease;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            margin-top: 25px; \n        }\n        .gtr-submit-button:hover {\n            background: linear-gradient(135deg, #0056b3, #007bff);\n            box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);\n            transform: translateY(-3px);\n        }\n        \/* Stili i Mesazheve *\/\n        .gtr-message {\n            padding: 15px;\n            border-radius: 8px;\n            margin-bottom: 20px;\n            font-weight: bold;\n            text-align: center;\n            border: 1px solid;\n        }\n        .gtr-success-message {\n            background-color: #333; \n            color: #fff !important; \n            border-color: #4CAF50; \n        }\n        \n        \/* STILI I SHTUAR P\u00cbR MESAZHIN E GABIMIT T\u00cb BLACKLIST *\/\n        .gtr-error-message {\n            background-color: #ffe6e6; \/* Ngjyr\u00eb e kuqe e zbeht\u00eb *\/\n            color: #e74c3c; \/* Ngjyr\u00eb e kuqe e fort\u00eb *\/\n            border-color: #e74c3c;\n        }\n        \n        \/* SHTES\u00cb E RE: Stili p\u00ebr opsionet e bllokuara (t\u00eb zbehura) *\/\n        #gtr-reservation-form select option[disabled] {\n            color: #aaa; \/* Zbeh ngjyr\u00ebn *\/\n            background-color: #f7f7f7;\n            \/* text-decoration: line-through; (Opsionale, p\u00ebr ta b\u00ebr\u00eb m\u00eb t\u00eb qart\u00eb q\u00eb \u00ebsht\u00eb i pavlefsh\u00ebm) *\/\n        }\n    <\/style>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        const dateInput = document.getElementById('gtr-date');\n        const timeInput = document.getElementById('gtr-time');\n        const submitButton = document.querySelector('.gtr-submit-button');\n        const form = document.getElementById('gtr-reservation-form');\n        const malesInput = document.getElementById('gtr-males');\n        const femalesInput = document.getElementById('gtr-females');\n\n        \/\/ Vendos dat\u00ebn minimale n\u00eb sot (kufizon zgjedhjen e datave t\u00eb kaluara)\n        const today = new Date();\n        const minDate = today.getFullYear() + '-' + \n                        String(today.getMonth() + 1).padStart(2, '0') + '-' + \n                        String(today.getDate()).padStart(2, '0');\n        dateInput.setAttribute('min', minDate); \n\n        \/\/ FUNKSION I RI: P\u00cbRDIT\u00cbSON OPSIONET E OR\u00cbS DHE BLLOKON OR\u00cbT E KALUARA\n        function updateTimeOptions() {\n            \/\/ Data e sotme n\u00eb formatin YYYY-MM-DD\n            const now = new Date();\n            const todayString = now.getFullYear() + '-' + \n                                String(now.getMonth() + 1).padStart(2, '0') + '-' + \n                                String(now.getDate()).padStart(2, '0');\n            \n            \/\/ Ora aktuale n\u00eb formatin HH:MM\n            const currentHour = now.getHours();\n            const currentMinute = now.getMinutes();\n            \/\/ P\u00ebrdorim or\u00ebn aktuale si kufi. P.sh. n\u00ebse ora \u00ebsht\u00eb 18:01, 18:00 bllokohet.\n            const currentTimeString = String(currentHour).padStart(2, '0') + ':' + \n                                      String(currentMinute).padStart(2, '0');\n            \n            const selectedDateString = dateInput.value;\n            const isToday = selectedDateString === todayString;\n\n            for (let i = 0; i < timeInput.options.length; i++) {\n                const option = timeInput.options[i];\n                const optionTime = option.value;\n                \n                \/\/ L\u00ebviz opsionin default (Zgjidh or\u00ebn)\n                if (optionTime === \"\") continue; \n                \n                if (isToday) {\n                    \/\/ Blloko \u00e7do or\u00eb q\u00eb \u00ebsht\u00eb <= me or\u00ebn aktuale (p.sh. \"18:00\" <= \"18:01\")\n                    if (optionTime <= currentTimeString) { \n                        option.disabled = true;\n                        \/\/ N\u00ebse ora e kaluar \u00ebsht\u00eb zgjedhur, e zhbllokojm\u00eb zgjedhjen\n                        if (option.selected) {\n                            timeInput.value = \"\"; \n                        }\n                    } else {\n                        \/\/ Or\u00ebt n\u00eb t\u00eb ardhmen jan\u00eb t\u00eb lira\n                        option.disabled = false;\n                    }\n                } else {\n                    \/\/ P\u00ebr datat e ardhshme, t\u00eb gjitha or\u00ebt jan\u00eb t\u00eb lira\n                    option.disabled = false;\n                }\n            }\n        }\n        \n        \/\/ Thirr funksionin n\u00eb ngarkim dhe n\u00eb ndryshimin fillestar t\u00eb dat\u00ebs\n        updateTimeOptions();\n\n        \/\/ FUNKSIONALITETI P\u00cbR BLLOKIMIN E 31 DHJETORIT (JO 1 JANARIT)\n        dateInput.addEventListener('change', function() {\n            const selectedDate = new Date(this.value.replace(\/-\/g, '\/')); \n            const dayOfWeek = selectedDate.getDay(); \n            \/\/ Kontrolli p\u00ebr 31 Dhjetor: muaji \u00ebsht\u00eb 11 (Dhjetor) dhe data \u00ebsht\u00eb 31\n            const isNewYearsEve = (selectedDate.getMonth() === 11 && selectedDate.getDate() === 31);\n\n            \/\/ THIRR FUNKSIONIN P\u00cbR OR\u00cbT SA HER\u00cb Q\u00cb NDRYSHON DATA\n            updateTimeOptions();\n            \n            if (isNaN(dayOfWeek)) return; \n\n            if (isNewYearsEve) { \n                \/\/ Bllokohet vet\u00ebm n\u00eb 31 Dhjetor\n                alert('December 31st is closed. Please select another day.');\n                submitButton.disabled = true;\n                submitButton.style.opacity = '0.5';\n                submitButton.style.cursor = 'not-allowed';\n            } else {\n                \/\/ T\u00eb gjitha dit\u00ebt e tjera jan\u00eb t\u00eb hapura (p\u00ebrfshir\u00eb 1 Janarin)\n                submitButton.disabled = false;\n                submitButton.style.opacity = '1';\n                submitButton.style.cursor = 'pointer';\n            }\n        });\n\n        \/\/ Kontrolli i Meshkujve + Femrave\n        function validateGuests() {\n            const males = parseInt(malesInput.value, 10) || 0;\n            const females = parseInt(femalesInput.value, 10) || 0;\n            const totalGuests = males + females;\n\n            if (totalGuests < 1) {\n                malesInput.setCustomValidity(\"Total guests must be at least 1.\"); \n            } else {\n                malesInput.setCustomValidity(\"\"); \n            }\n        }\n        \n        malesInput.addEventListener('input', validateGuests);\n        femalesInput.addEventListener('input', validateGuests);\n        form.addEventListener('submit', function(e) {\n            validateGuests(); \n            if (!malesInput.checkValidity()) {\n                e.preventDefault();\n                malesInput.reportValidity(); \n            }\n        });\n    });\n    <\/script>\n\n    \n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4498","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/colonialtirana.com\/sq\/wp-json\/wp\/v2\/pages\/4498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/colonialtirana.com\/sq\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/colonialtirana.com\/sq\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/colonialtirana.com\/sq\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/colonialtirana.com\/sq\/wp-json\/wp\/v2\/comments?post=4498"}],"version-history":[{"count":8,"href":"https:\/\/colonialtirana.com\/sq\/wp-json\/wp\/v2\/pages\/4498\/revisions"}],"predecessor-version":[{"id":4520,"href":"https:\/\/colonialtirana.com\/sq\/wp-json\/wp\/v2\/pages\/4498\/revisions\/4520"}],"wp:attachment":[{"href":"https:\/\/colonialtirana.com\/sq\/wp-json\/wp\/v2\/media?parent=4498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}