{"id":2918,"date":"2025-06-17T18:07:40","date_gmt":"2025-06-17T18:07:40","guid":{"rendered":"https:\/\/fekkas-gym.gr\/rantevou\/?page_id=2918"},"modified":"2026-04-20T10:20:09","modified_gmt":"2026-04-20T10:20:09","slug":"app-calendar","status":"publish","type":"page","link":"https:\/\/fekkas-gym.gr\/rantevou\/","title":{"rendered":"APP – Calendar"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

\u039a\u03bb\u03b5\u03af\u03c3\u03c4\u03b5 \u03c0\u03c1\u03bf\u03c0\u03cc\u03bd\u03b7\u03c3\u03b7<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
*\u0393\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b5\u03af\u03c4\u03b5 \u03cc\u03bb\u03b5\u03c2 \u03c4\u03b9\u03c2 \u03bc\u03ad\u03c1\u03b5\u03c2 \u03ba\u03ac\u03bd\u03c4\u03b5 scroll \u2194 \u03c4\u03bf\u03bd \u03c0\u03af\u03bd\u03b1\u03ba\u03b1 \u03b4\u03b5\u03be\u03b9\u03ac \u03ba\u03b1\u03b9 \u03b1\u03c1\u03b9\u03c3\u03c4\u03b5\u03c1\u03ac.

\n*\u0393\u03b9\u03b1 \u03bd\u03b1 \u03b5\u03c0\u03b9\u03bb\u03ad\u03be\u03b5\u03c4\u03b5 \u03b7\u03bc\u03ad\u03c1\u03b1 \u03ac\u03bb\u03bb\u03bf\u03c5 \u03bc\u03ae\u03bd\u03b1 \u03bc\u03b5\u03c4\u03b1\u03c6\u03b5\u03c1\u03b8\u03b5\u03af\u03c4\u03b5 \u03c0\u03c1\u03ce\u03c4\u03b1 \u03c3\u03c4\u03bf\u03bd \u03b5\u03c0\u03b9\u03b8\u03c5\u03bc\u03b7\u03c4\u03cc \u03bc\u03ae\u03bd\u03b1.<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n \u039a\u03bb\u03b5\u03af\u03c3\u03c4\u03b5 \u03c1\u03b1\u03bd\u03c4\u03b5\u03b2\u03bf\u03cd<\/title>\r\n \r\n \r\n \r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n min-height: 100vh;\r\n\r\n\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n }\r\n\r\n #calendar-booking {\r\n display: block; \/* HARDCODED *\/\r\n }\r\n\r\n .calendar-container {\r\n background: white;\r\n border-radius: 20px;\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\r\n overflow: visible;\r\n max-width: 800px;\r\n width: 100%;\r\n position: relative;\r\n }\r\n\r\n .calendar-header {\r\n background: var(--e-global-color-secondary);\r\n color: white;\r\n padding: 30px;\r\n text-align: center;\r\n position: relative;\r\n }\r\n\r\n .calendar-title {\r\n color: white;\r\n font-size: 2rem;\r\n font-weight: 300;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .calendar-nav {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-top: 20px;\r\n }\r\n\r\n .nav-btn {\r\n background: rgba(255, 255, 255, 0.2);\r\n border: none;\r\n color: white;\r\n padding: 10px 15px;\r\n border-radius: 50px;\r\n cursor: pointer;\r\n font-size: 1.2rem;\r\n transition: all 0.3s ease;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .nav-btn:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n transform: scale(1.05);\r\n }\r\n\r\n .month-year {\r\n font-size: 1.3rem;\r\n font-weight: 500;\r\n }\r\n\r\n .calendar-wrapper {\r\n overflow-x: auto;\r\n overflow-y: visible;\r\n min-width: 100%;\r\n }\r\n\r\n .calendar-inner {\r\n min-width: 700px; \/* Fixed minimum width for calendar *\/\r\n width: 100%;\r\n }\r\n\r\n .weekdays {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n background: #f8f9fa;\r\n border-bottom: 1px solid #e9ecef;\r\n }\r\n\r\n .weekday {\r\n padding: 15px;\r\n text-align: center;\r\n font-weight: 600;\r\n color: #495057;\r\n font-size: 0.9rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n min-width: 100px; \/* Fixed minimum width for weekday headers *\/\r\n }\r\n\r\n .calendar-grid {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n gap: 1px;\r\n background: #e9ecef;\r\n padding: 1px;\r\n overflow: visible;\r\n }\r\n\r\n .day-container {\r\n background: white;\r\n min-height: 80px;\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n padding: 10px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: visible;\r\n flex-direction: column;\r\n min-width: 100px; \/* Fixed minimum width for day containers *\/\r\n }\r\n\r\n .day-container:hover {\r\n background: #f8f9fa;\r\n transform: scale(1.02);\r\n }\r\n\r\n .day-container.other-month {\r\n color: #ced4da;\r\n background: #f8f9fa;\r\n }\r\n\r\n .day-container.today {\r\n background: linear-gradient(45deg, #667eea, #764ba2);\r\n color: white;\r\n }\r\n\r\n .day-container.today:hover {\r\n background: linear-gradient(45deg, #5a6fd8, #6a4190);\r\n }\r\n\r\n .day-number {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n z-index: 2;\r\n }\r\n\r\n .day-container.selected {\r\n background: #e3f2fd;\r\n border: 2px solid #2196f3;\r\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\r\n z-index: 50;\r\n }\r\n\r\n .day-container::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(45deg, transparent, rgba(102, 126, 234, 0.1));\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .day-container:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n body {\r\n padding: 10px;\r\n }\r\n\r\n .calendar-container {\r\n margin: 0;\r\n border-radius: 10px;\r\n max-width: 100%;\r\n overflow: hidden;\r\n }\r\n\r\n .calendar-header {\r\n padding: 20px 15px;\r\n }\r\n\r\n .calendar-title {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .calendar-nav {\r\n margin-top: 15px;\r\n }\r\n\r\n .nav-btn {\r\n padding: 8px 12px;\r\n font-size: 1rem;\r\n }\r\n\r\n .month-year {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .calendar-wrapper {\r\n overflow-x: auto;\r\n -webkit-overflow-scrolling: touch;\r\n scrollbar-width: thin;\r\n scrollbar-color: #667eea #f1f1f1;\r\n }\r\n\r\n .calendar-wrapper::-webkit-scrollbar {\r\n height: 8px;\r\n }\r\n\r\n .calendar-wrapper::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 10px;\r\n }\r\n\r\n .calendar-wrapper::-webkit-scrollbar-thumb {\r\n background: #667eea;\r\n border-radius: 10px;\r\n }\r\n\r\n .calendar-wrapper::-webkit-scrollbar-thumb:hover {\r\n background: #5a6fd8;\r\n }\r\n\r\n .calendar-inner {\r\n min-width: 700px;\r\n }\r\n\r\n .weekday {\r\n padding: 10px 5px;\r\n font-size: 0.8rem;\r\n min-width: 100px;\r\n }\r\n\r\n .day-container {\r\n min-height: 70px;\r\n padding: 8px 5px;\r\n min-width: 100px;\r\n }\r\n\r\n .day-number {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .available-times {\r\n font-size: 0.65rem;\r\n }\r\n\r\n .time-slots {\r\n min-width: 180px;\r\n max-height: 150px;\r\n }\r\n\r\n .time-slot {\r\n padding: 8px 10px;\r\n font-size: 0.8rem;\r\n }\r\n\r\n .confirm-section {\r\n margin-top: 15px;\r\n padding: 15px;\r\n border-radius: 10px;\r\n }\r\n\r\n .confirm-btn {\r\n padding: 12px 20px;\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n .day-container.available {\r\n background: #e8f5e8;\r\n border-left: 4px solid #28a745;\r\n }\r\n\r\n .day-container.available:hover {\r\n background: #d4edda;\r\n }\r\n\r\n .available-times {\r\n margin-top: 5px;\r\n font-size: 0.7rem;\r\n color: #28a745;\r\n font-weight: 500;\r\n }\r\n\r\n .time-slots {\r\n display: none;\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n right: 0;\r\n background: white;\r\n border: 2px solid #dee2e6;\r\n border-radius: 8px;\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n z-index: 100;\r\n max-height: 200px;\r\n overflow-y: auto;\r\n min-width: 270px;\r\n }\r\n\r\n .day-container.selected .time-slots {\r\n display: block;\r\n animation: slideDown 0.3s ease-out;\r\n }\r\n\r\n @keyframes slideDown {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .time-slot {\r\n padding: 12px 15px;\r\n border-bottom: 1px solid #f8f9fa;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n font-size: 0.9rem;\r\n color: #495057;\r\n }\r\n\r\n .time-slot:hover {\r\n background: #e3f2fd;\r\n color: #1976d2;\r\n }\r\n\r\n .time-slot:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .time-slot.selected {\r\n background: #2196f3;\r\n color: white;\r\n font-weight: 600;\r\n }\r\n\r\n .confirm-section {\r\n background: white;\r\n margin-top: 20px;\r\n padding: 20px;\r\n border-radius: 15px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n display: none;\r\n }\r\n\r\n .selected-appointment {\r\n background: #e8f5e8;\r\n padding: 15px;\r\n border-radius: 10px;\r\n margin-bottom: 15px;\r\n border-left: 4px solid #28a745;\r\n }\r\n\r\n .appointment-date {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n color: #495057;\r\n }\r\n\r\n .appointment-time {\r\n font-size: 1rem;\r\n color: #28a745;\r\n margin-top: 5px;\r\n }\r\n\r\n .confirm-btn {\r\n background: linear-gradient(45deg, #28a745, #20c997);\r\n color: white;\r\n border: none;\r\n padding: 15px 30px;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n width: 100%;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .confirm-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 20px rgba(40, 167, 69, 0.3);\r\n }\r\n\r\n .confirm-btn:disabled {\r\n background: #6c757d;\r\n cursor: not-allowed;\r\n transform: none;\r\n box-shadow: none;\r\n }\r\n\r\n .edit-mode-info {\r\n background: #fff3cd;\r\n border: 1px solid #ffeaa7;\r\n border-radius: 10px;\r\n padding: 15px;\r\n margin-bottom: 20px;\r\n color: #856404;\r\n }\r\n\r\n .edit-mode-info strong {\r\n color: #533f03;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"calendar-container\">\r\n <div class=\"calendar-header\">\r\n <h1 class=\"calendar-title\"><\/h1>\r\n <div class=\"calendar-nav\">\r\n <button class=\"nav-btn\" id=\"prevBtn\">\u2039<\/button>\r\n <div class=\"month-year\" id=\"monthYear\"><\/div>\r\n <button class=\"nav-btn\" id=\"nextBtn\">\u203a<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"editModeInfo\" class=\"edit-mode-info\" style=\"display: none;\">\r\n <strong>\u0395\u03c0\u03b5\u03be\u03b5\u03c1\u03b3\u03b1\u03c3\u03af\u03b1:<\/strong> \u0395\u03c0\u03b5\u03be\u03b5\u03c1\u03b3\u03ac\u03b6\u03b5\u03c3\u03c4\u03b5 \u03ad\u03bd\u03b1 \u03c5\u03c0\u03ac\u03c1\u03c7\u03bf\u03bd \u03c1\u03b1\u03bd\u03c4\u03b5\u03b2\u03bf\u03cd.\r\n <\/div>\r\n\r\n <div class=\"calendar-wrapper\">\r\n <div class=\"calendar-inner\">\r\n <div class=\"weekdays\">\r\n <div class=\"weekday\">\u039a\u03c5\u03c1<\/div>\r\n <div class=\"weekday\">\u0394\u03b5\u03c5<\/div>\r\n <div class=\"weekday\">\u03a4\u03c1\u03af<\/div>\r\n <div class=\"weekday\">\u03a4\u03b5\u03c4<\/div>\r\n <div class=\"weekday\">\u03a0\u03ad\u03bc<\/div>\r\n <div class=\"weekday\">\u03a0\u03b1\u03c1<\/div>\r\n <div class=\"weekday\">\u03a3\u03ac\u03b2<\/div>\r\n <\/div>\r\n\r\n <div class=\"calendar-grid\" id=\"calendarGrid\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"confirm-section\" id=\"confirmSection\">\r\n <div class=\"selected-appointment\" id=\"selectedAppointment\">\r\n <div class=\"appointment-date\" id=\"appointmentDate\"><\/div>\r\n <div class=\"appointment-time\" id=\"appointmentTime\"><\/div>\r\n <\/div>\r\n <button class=\"confirm-btn\" id=\"confirmBtn\">\u0395\u03c0\u03b9\u03b2\u03b5\u03b2\u03b1\u03af\u03c9\u03c3\u03b7 - \u03a3\u03c5\u03bd\u03ad\u03c7\u03b5\u03b9\u03b1<\/button>\r\n <\/div>\r\n <\/div>\r\n <script>\r\n class ClientCalendar {\r\n constructor() {\r\n this.currentDate = new Date();\r\n this.selectedDate = null;\r\n this.selectedTimeSlot = null;\r\n this.availableSlots = {};\r\n this.monthsWithSlots = new Set();\r\n this.editMode = false;\r\n this.clientKey = null;\r\n this.existingAppointment = null;\r\n this.bookingMode = 'hour'; \/\/ 'hour' or 'half-hour'\r\n this.appointmentType = null; \/\/ grafeio-1, grafeio-2, online-1, online-2\r\n this.monthNames = [\r\n '\u0399\u03b1\u03bd\u03bf\u03c5\u03ac\u03c1\u03b9\u03bf\u03c2', '\u03a6\u03b5\u03b2\u03c1\u03bf\u03c5\u03ac\u03c1\u03b9\u03bf\u03c2', '\u039c\u03ac\u03c1\u03c4\u03b9\u03bf\u03c2', '\u0391\u03c0\u03c1\u03af\u03bb\u03b9\u03bf\u03c2', '\u039c\u03ac\u03b9\u03bf\u03c2', '\u0399\u03bf\u03cd\u03bd\u03b9\u03bf\u03c2',\r\n '\u0399\u03bf\u03cd\u03bb\u03b9\u03bf\u03c2', '\u0391\u03cd\u03b3\u03bf\u03c5\u03c3\u03c4\u03bf\u03c2', '\u03a3\u03b5\u03c0\u03c4\u03ad\u03bc\u03b2\u03c1\u03b9\u03bf\u03c2', '\u039f\u03ba\u03c4\u03ce\u03b2\u03c1\u03b9\u03bf\u03c2', '\u039d\u03bf\u03ad\u03bc\u03b2\u03c1\u03b9\u03bf\u03c2', '\u0394\u03b5\u03ba\u03ad\u03bc\u03b2\u03c1\u03b9\u03bf\u03c2'\r\n ];\r\n\r\n this.init();\r\n }\r\n\r\n init() {\r\n this.detectBookingMode();\r\n this.detectAppointmentType();\r\n this.checkEditMode();\r\n this.bindEvents();\r\n this.loadAvailableSlots();\r\n }\r\n\r\n detectAppointmentType() {\r\n \/\/ Check URL parameters for appointment type\r\n const urlParams = new URLSearchParams(window.location.search);\r\n this.appointmentType = urlParams.get('appointment_type');\r\n\r\n \/\/ Also check sessionStorage as backup\r\n if (!this.appointmentType) {\r\n this.appointmentType = sessionStorage.getItem('selectedAppointmentType');\r\n }\r\n\r\n \/\/ Check if global AppointmentTypeHandler is available\r\n if (typeof AppointmentTypeHandler !== 'undefined') {\r\n const currentType = AppointmentTypeHandler.getCurrentAppointmentType();\r\n if (currentType) {\r\n this.appointmentType = currentType;\r\n }\r\n }\r\n\r\n \/\/ Listen for appointment type changes\r\n document.addEventListener('appointmentTypeChanged', (event) => {\r\n this.appointmentType = event.detail.appointmentType;\r\n this.loadAvailableSlots(); \/\/ Reload slots when type changes\r\n });\r\n }\r\n\r\n detectBookingMode() {\r\n \/\/ Check URL parameters for booking mode\r\n const urlParams = new URLSearchParams(window.location.search);\r\n const mode = urlParams.get('mode');\r\n\r\n if (mode === 'half-hour') {\r\n this.bookingMode = 'half-hour';\r\n } else if (mode === 'hour') {\r\n this.bookingMode = 'hour';\r\n } else {\r\n \/\/ Default to hour mode if no specific mode is set\r\n this.bookingMode = 'hour';\r\n }\r\n\r\n \/\/ Also check for global variables that might be set by the parent page\r\n if (typeof window.appointmentBookingMode !== 'undefined') {\r\n this.bookingMode = window.appointmentBookingMode;\r\n }\r\n\r\n \/\/ If calendar is embedded in a parent page, try to detect from localStorage\r\n \/\/ This can be used as a fallback for persistent mode detection\r\n const storedMode = localStorage.getItem('appointmentBookingMode');\r\n if (storedMode && (storedMode === 'hour' || storedMode === 'half-hour')) {\r\n this.bookingMode = storedMode;\r\n }\r\n\r\n }\r\n\r\n checkEditMode() {\r\n const urlParams = new URLSearchParams(window.location.search);\r\n this.clientKey = urlParams.get('key');\r\n\r\n if (this.clientKey) {\r\n this.editMode = true;\r\n document.getElementById('editModeInfo').style.display = 'block';\r\n this.loadExistingAppointment();\r\n }\r\n }\r\n\r\n async loadExistingAppointment() {\r\n try {\r\n const response = await fetch('https:\/\/fekkas-gym.gr\/rantevou\/my-code-folder\/client_appointments.php', {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n },\r\n body: JSON.stringify({\r\n action: 'get_appointment',\r\n client_key: this.clientKey\r\n })\r\n });\r\n\r\n const result = await response.json();\r\n\r\n if (result.success && result.data) {\r\n this.existingAppointment = result.data;\r\n \/\/ Set current date to the appointment's month\/year\r\n const appointmentDate = new Date(result.data.appointment_date);\r\n this.currentDate = new Date(appointmentDate.getFullYear(), appointmentDate.getMonth(), 1);\r\n }\r\n } catch (error) {\r\n console.error('Failed to load existing appointment:', error);\r\n }\r\n } bindEvents() {\r\n \/\/ Calendar navigation\r\n document.getElementById('prevBtn').addEventListener('click', () => {\r\n this.navigateMonth(-1);\r\n });\r\n\r\n document.getElementById('nextBtn').addEventListener('click', () => {\r\n this.navigateMonth(1);\r\n });\r\n\r\n \/\/ Confirm button\r\n document.getElementById('confirmBtn').addEventListener('click', () => {\r\n this.confirmAppointment();\r\n });\r\n\r\n \/\/ Close time slots when clicking outside\r\n document.addEventListener('click', (e) => {\r\n if (!e.target.closest('.day-container')) {\r\n this.clearSelection();\r\n }\r\n });\r\n }\r\n\r\n navigateMonth(direction) {\r\n const newMonth = this.currentDate.getMonth() + direction;\r\n const newYear = this.currentDate.getFullYear() + (newMonth < 0 ? -1 : newMonth > 11 ? 1 : 0);\r\n const normalizedMonth = ((newMonth % 12) + 12) % 12;\r\n\r\n const monthKey = `${newYear}-${(normalizedMonth + 1).toString().padStart(2, '0')}`;\r\n\r\n \/\/ Only allow navigation to months with available slots\r\n if (this.monthsWithSlots.has(monthKey) || this.editMode) {\r\n this.currentDate = new Date(newYear, normalizedMonth, 1);\r\n this.render();\r\n }\r\n }\r\n\r\n async loadAvailableSlots() {\r\n try {\r\n \/\/ Prepare request body - include client key if in edit mode\r\n const requestBody = {\r\n action: 'get_available_slots'\r\n };\r\n\r\n \/\/ If in edit mode, include client key to get slots that include the user's current appointment\r\n if (this.editMode && this.clientKey) {\r\n requestBody.client_key = this.clientKey;\r\n }\r\n\r\n \/\/ Get appointment type from various sources\r\n let appointmentType = this.appointmentType;\r\n \r\n \/\/ Try to get from appointment type manager\r\n if (!appointmentType && window.appointmentTypeManager) {\r\n appointmentType = window.appointmentTypeManager.getCurrentAppointmentType();\r\n }\r\n \r\n \/\/ Try to get from URL parameters\r\n if (!appointmentType) {\r\n const urlParams = new URLSearchParams(window.location.search);\r\n appointmentType = urlParams.get('appointment_type');\r\n }\r\n \r\n \/\/ Try to get from session storage\r\n if (!appointmentType) {\r\n appointmentType = sessionStorage.getItem('selectedAppointmentType');\r\n }\r\n\r\n \/\/ Include appointment type if available\r\n if (appointmentType) {\r\n requestBody.appointment_type = appointmentType;\r\n }\r\n\r\n const response = await fetch('https:\/\/fekkas-gym.gr\/rantevou\/my-code-folder\/client_appointments.php', {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n },\r\n body: JSON.stringify(requestBody)\r\n });\r\n\r\n const result = await response.json();\r\n\r\n if (result.success) {\r\n if (result.data.length === 0) {\r\n const calendarContainer = document.querySelector('.calendar-container');\r\n calendarContainer.innerHTML = '<h2 style=\"padding: 10px; text-align: center;\">\u0394\u03c5\u03c3\u03c4\u03c5\u03c7\u03ce\u03c2 \u03b4\u03b5\u03bd \u03c5\u03c0\u03ac\u03c1\u03c7\u03bf\u03c5\u03bd \u03b4\u03b9\u03b1\u03b8\u03ad\u03c3\u03b9\u03bc\u03b1 \u03c1\u03b1\u03bd\u03c4\u03b5\u03b2\u03bf\u03cd! \u039e\u03b1\u03bd\u03b1\u03b4\u03bf\u03ba\u03b9\u03bc\u03ac\u03c3\u03c4\u03b5 \u03b1\u03c1\u03b3\u03cc\u03c4\u03b5\u03c1\u03b1 \u03ae \u03b5\u03c0\u03b9\u03ba\u03bf\u03b9\u03bd\u03c9\u03bd\u03ae\u03c3\u03c4\u03b5 \u03bc\u03b1\u03b6\u03af \u03bc\u03b1\u03c2.<\/h2>';\r\n } else {\r\n \/\/ Store available slots in a structured format\r\n let processedSlots = result.data || {};\r\n\r\n \/\/ If booking mode is 'hour', join consecutive 30-minute slots\r\n if (this.bookingMode === 'hour') {\r\n processedSlots = this.joinSlotsToHour(processedSlots);\r\n }\r\n\r\n this.availableSlots = processedSlots;\r\n\r\n \/\/ Build set of months with available slots\r\n Object.keys(this.availableSlots).forEach(date => {\r\n const monthKey = date.substring(0, 7); \/\/ YYYY-MM\r\n this.monthsWithSlots.add(monthKey);\r\n });\r\n\r\n \/\/ If no months have slots and not in edit mode, show current month\r\n if (this.monthsWithSlots.size === 0 && !this.editMode) {\r\n const currentMonthKey = `${this.currentDate.getFullYear()}-${(this.currentDate.getMonth() + 1).toString().padStart(2, '0')}`;\r\n this.monthsWithSlots.add(currentMonthKey);\r\n }\r\n\r\n \/\/ Set initial month to first available month if not editing\r\n if (!this.editMode && this.monthsWithSlots.size > 0) {\r\n const firstMonth = Array.from(this.monthsWithSlots).sort()[0];\r\n const [year, month] = firstMonth.split('-').map(Number);\r\n this.currentDate = new Date(year, month - 1, 1);\r\n }\r\n\r\n this.render();\r\n }\r\n }\r\n } catch (error) {\r\n console.error('Failed to load available slots:', error);\r\n this.render();\r\n }\r\n }\r\n\r\n joinSlotsToHour(slotsData) {\r\n const joinedSlots = {};\r\n\r\n \/\/ Process each date\r\n Object.keys(slotsData).forEach(date => {\r\n const daySlots = slotsData[date];\r\n joinedSlots[date] = [];\r\n\r\n \/\/ Sort slots by start time\r\n const sortedSlots = daySlots.sort((a, b) => {\r\n return a.start_time.localeCompare(b.start_time);\r\n });\r\n\r\n \/\/ Create all possible 1-hour combinations without consuming slots\r\n for (let i = 0; i < sortedSlots.length; i++) {\r\n const currentSlot = sortedSlots[i];\r\n\r\n \/\/ Skip if start or end time has 30 \r\n if (currentSlot.start_time.substring(3,5) === '30') {\r\n continue;\r\n }\r\n\r\n \/\/ Skip if slot contains \"30\" (we need rounded slots) ONLY FOR CURRENT INSTANCE\r\n if (currentSlot.duration !== 30) {\r\n \/\/ Add existing 60-minute slots as-is\r\n if (currentSlot.duration === 60) {\r\n joinedSlots[date].push(currentSlot);\r\n }\r\n continue;\r\n }\r\n\r\n \/\/ Look for the next consecutive 30-minute slot\r\n for (let j = i + 1; j < sortedSlots.length; j++) {\r\n const nextSlot = sortedSlots[j];\r\n\r\n \/\/ Check if we found a consecutive 30-minute slot\r\n if (nextSlot.duration === 30 &&\r\n currentSlot.end_time === nextSlot.start_time) {\r\n\r\n \/\/ Create joined 1-hour slot\r\n const joinedSlot = {\r\n id: `${currentSlot.id}-${nextSlot.id}`,\r\n start_time: currentSlot.start_time,\r\n end_time: nextSlot.end_time,\r\n duration: 60,\r\n slot_ids: [currentSlot.id, nextSlot.id],\r\n isJoined: true,\r\n \/\/ A booking requires both consecutive slots, so capacity is\r\n \/\/ limited by whichever of the two has fewer spots remaining\r\n available_spots: Math.min(currentSlot.available_spots, nextSlot.available_spots)\r\n };\r\n\r\n \/\/ If either slot is from current appointment, mark the joined slot\r\n if (currentSlot.is_from_current_appointment || nextSlot.is_from_current_appointment) {\r\n joinedSlot.is_from_current_appointment = true;\r\n }\r\n\r\n joinedSlots[date].push(joinedSlot);\r\n break; \/\/ Found the consecutive slot, no need to look further\r\n }\r\n }\r\n }\r\n\r\n \/\/ Remove dates with no available 1-hour slots\r\n if (joinedSlots[date].length === 0) {\r\n delete joinedSlots[date];\r\n }\r\n });\r\n\r\n return joinedSlots;\r\n }\r\n\r\n getDaysInMonth(year, month) {\r\n return new Date(year, month + 1, 0).getDate();\r\n }\r\n\r\n getFirstDayOfMonth(year, month) {\r\n return new Date(year, month, 1).getDay();\r\n }\r\n\r\n isToday(year, month, day) {\r\n const today = new Date();\r\n return year === today.getFullYear() &&\r\n month === today.getMonth() &&\r\n day === today.getDate();\r\n }\r\n\r\n createDayContainer(day, isCurrentMonth, year, month) {\r\n const dayContainer = document.createElement('div');\r\n dayContainer.className = 'day-container';\r\n\r\n const dateKey = `${year}-${(month + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;\r\n\r\n if (!isCurrentMonth) {\r\n dayContainer.classList.add('other-month');\r\n }\r\n\r\n if (isCurrentMonth && this.isToday(year, month, day)) {\r\n dayContainer.classList.add('today');\r\n }\r\n\r\n \/\/ Check if day has available slots\r\n const hasSlots = this.availableSlots[dateKey] && this.availableSlots[dateKey].length > 0;\r\n\r\n \/\/ Check if this is the existing appointment date (edit mode)\r\n const isExistingAppointment = this.editMode && this.existingAppointment &&\r\n this.existingAppointment.appointment_date === dateKey;\r\n\r\n if (hasSlots || isExistingAppointment) {\r\n dayContainer.classList.add('available');\r\n }\r\n\r\n const dayNumber = document.createElement('div');\r\n dayNumber.className = 'day-number';\r\n dayNumber.textContent = day;\r\n dayContainer.appendChild(dayNumber);\r\n\r\n \/\/ Add available times indicator\r\n if (hasSlots) {\r\n const availableTimes = document.createElement('div');\r\n availableTimes.className = 'available-times';\r\n availableTimes.textContent = `${this.availableSlots[dateKey].length} \u03c9\u03c1\u03ac\u03c1\u03b9\u03b1 \u03b4\u03b9\u03b1\u03b8\u03ad\u03c3\u03b9\u03bc\u03b1`;\r\n dayContainer.appendChild(availableTimes);\r\n }\r\n\r\n \/\/ Add time slots dropdown\r\n if (hasSlots || isExistingAppointment) {\r\n const timeSlotsContainer = document.createElement('div');\r\n timeSlotsContainer.className = 'time-slots';\r\n\r\n \/\/ Add existing appointment slot if in edit mode\r\n if (isExistingAppointment) {\r\n const existingSlot = document.createElement('div');\r\n existingSlot.className = 'time-slot';\r\n existingSlot.textContent = `${this.existingAppointment.appointment_start_time} - ${this.existingAppointment.appointment_end_time} (\u03c5\u03c0\u03ac\u03c1\u03c7\u03bf\u03bd \u03c1\u03b1\u03bd\u03c4\u03b5\u03b2\u03bf\u03cd)`;\r\n existingSlot.style.background = '#fff3cd';\r\n existingSlot.style.fontWeight = 'bold';\r\n existingSlot.dataset.slotId = this.existingAppointment.slot_id;\r\n existingSlot.dataset.startTime = this.existingAppointment.appointment_start_time;\r\n existingSlot.dataset.endTime = this.existingAppointment.appointment_end_time;\r\n existingSlot.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n this.selectTimeSlot(existingSlot, dateKey);\r\n });\r\n timeSlotsContainer.appendChild(existingSlot);\r\n }\r\n\r\n \/\/ Add available slots\r\n if (hasSlots) {\r\n this.availableSlots[dateKey].forEach(slot => {\r\n \/\/ Skip the slot if it matches the existing appointment time\r\n if (isExistingAppointment &&\r\n slot.start_time === this.existingAppointment.appointment_start_time &&\r\n slot.end_time === this.existingAppointment.appointment_end_time) {\r\n return; \/\/ Skip this slot\r\n }\r\n\r\n const timeSlot = document.createElement('div');\r\n timeSlot.className = 'time-slot';\r\n \/\/ Display the time range followed by the remaining available spots count\r\n timeSlot.textContent = `${slot.start_time.substring(0, 5)} - ${slot.end_time.substring(0, 5)} (${slot.available_spots} ${slot.available_spots === 1 ? '\u03b8\u03ad\u03c3\u03b7 \u03b5\u03bb\u03b5\u03cd\u03b8\u03b5\u03c1\u03b7' : '\u03b8\u03ad\u03c3\u03b5\u03b9\u03c2 \u03b5\u03bb\u03b5\u03cd\u03b8\u03b5\u03c1\u03b5\u03c2'})`;\r\n\r\n \/\/ Style slots that come from current appointment differently\r\n if (slot.is_from_current_appointment) {\r\n timeSlot.style.background = '#e6f7ff';\r\n timeSlot.style.border = '1px solid #91d5ff';\r\n timeSlot.title = '\u0394\u03b9\u03b1\u03b8\u03ad\u03c3\u03b9\u03bc\u03bf \u03bb\u03cc\u03b3\u03c9 \u03c4\u03b7\u03c2 \u03c4\u03c1\u03ad\u03c7\u03bf\u03c5\u03c3\u03b1\u03c2 \u03b5\u03c0\u03b5\u03be\u03b5\u03c1\u03b3\u03b1\u03c3\u03af\u03b1\u03c2 \u03c4\u03bf\u03c5 \u03c1\u03b1\u03bd\u03c4\u03b5\u03b2\u03bf\u03cd \u03c3\u03b1\u03c2';\r\n }\r\n\r\n \/\/ Handle joined slots differently\r\n if (slot.isJoined) {\r\n timeSlot.dataset.slotIds = JSON.stringify(slot.slot_ids);\r\n timeSlot.dataset.isJoined = 'true';\r\n } else {\r\n timeSlot.dataset.slotId = slot.id;\r\n timeSlot.dataset.isJoined = 'false';\r\n }\r\n\r\n timeSlot.dataset.startTime = slot.start_time;\r\n timeSlot.dataset.endTime = slot.end_time;\r\n\r\n timeSlot.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n this.selectTimeSlot(timeSlot, dateKey);\r\n });\r\n\r\n timeSlotsContainer.appendChild(timeSlot);\r\n });\r\n }\r\n\r\n dayContainer.appendChild(timeSlotsContainer);\r\n } \/\/ Add click event for day selection\r\n if (hasSlots || isExistingAppointment) {\r\n dayContainer.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n if (isCurrentMonth) {\r\n const isAlreadySelected = dayContainer.classList.contains('selected');\r\n\r\n \/\/ Remove previous selections\r\n document.querySelectorAll('.day-container.selected').forEach(el => {\r\n el.classList.remove('selected');\r\n });\r\n\r\n \/\/ Remove time slot selections\r\n document.querySelectorAll('.time-slot.selected').forEach(el => {\r\n el.classList.remove('selected');\r\n });\r\n\r\n \/\/ If it wasn't already selected, select it\r\n if (!isAlreadySelected) {\r\n dayContainer.classList.add('selected');\r\n this.selectedDate = new Date(year, month, day);\r\n } else {\r\n \/\/ If it was already selected, clear the selection\r\n this.selectedDate = null;\r\n this.selectedTimeSlot = null;\r\n this.updateConfirmSection();\r\n }\r\n }\r\n });\r\n }\r\n\r\n return dayContainer;\r\n } selectTimeSlot(timeSlotElement, dateKey) {\r\n \/\/ Remove previous time slot selections\r\n document.querySelectorAll('.time-slot.selected').forEach(el => {\r\n el.classList.remove('selected');\r\n });\r\n\r\n timeSlotElement.classList.add('selected');\r\n\r\n \/\/ Handle joined slots differently\r\n if (timeSlotElement.dataset.slotIds) {\r\n \/\/ This is a joined slot\r\n const slotIds = JSON.parse(timeSlotElement.dataset.slotIds);\r\n this.selectedTimeSlot = {\r\n slotIds: slotIds, \/\/ Array of slot IDs for joined slots\r\n isJoined: true,\r\n date: dateKey,\r\n startTime: timeSlotElement.dataset.startTime,\r\n endTime: timeSlotElement.dataset.endTime\r\n };\r\n } else {\r\n \/\/ This is a single slot\r\n this.selectedTimeSlot = {\r\n slotId: timeSlotElement.dataset.slotId,\r\n isJoined: false,\r\n date: dateKey,\r\n startTime: timeSlotElement.dataset.startTime,\r\n endTime: timeSlotElement.dataset.endTime\r\n };\r\n }\r\n\r\n this.updateConfirmSection();\r\n\r\n \/\/ Scroll to the very bottom of the page smoothly after a time slot is selected\r\n window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });\r\n }\r\n\r\n clearSelection() {\r\n \/\/ Remove day selections\r\n document.querySelectorAll('.day-container.selected').forEach(el => {\r\n el.classList.remove('selected');\r\n });\r\n\r\n \/\/ Remove time slot selections\r\n document.querySelectorAll('.time-slot.selected').forEach(el => {\r\n el.classList.remove('selected');\r\n });\r\n\r\n this.selectedDate = null;\r\n this.selectedTimeSlot = null;\r\n this.updateConfirmSection();\r\n }\r\n\r\n updateConfirmSection() {\r\n const confirmSection = document.getElementById('confirmSection');\r\n const appointmentDate = document.getElementById('appointmentDate');\r\n const appointmentTime = document.getElementById('appointmentTime');\r\n const confirmBtn = document.getElementById('confirmBtn');\r\n\r\n\r\n\r\n if (this.selectedTimeSlot) {\r\n \/\/ Greek weekday and month names\r\n const greekWeekdays = ['\u039a\u03c5\u03c1\u03b9\u03b1\u03ba\u03ae', '\u0394\u03b5\u03c5\u03c4\u03ad\u03c1\u03b1', '\u03a4\u03c1\u03af\u03c4\u03b7', '\u03a4\u03b5\u03c4\u03ac\u03c1\u03c4\u03b7', '\u03a0\u03ad\u03bc\u03c0\u03c4\u03b7', '\u03a0\u03b1\u03c1\u03b1\u03c3\u03ba\u03b5\u03c5\u03ae', '\u03a3\u03ac\u03b2\u03b2\u03b1\u03c4\u03bf'];\r\n const greekMonths = [\r\n '\u0399\u03b1\u03bd\u03bf\u03c5\u03b1\u03c1\u03af\u03bf\u03c5', '\u03a6\u03b5\u03b2\u03c1\u03bf\u03c5\u03b1\u03c1\u03af\u03bf\u03c5', '\u039c\u03b1\u03c1\u03c4\u03af\u03bf\u03c5', '\u0391\u03c0\u03c1\u03b9\u03bb\u03af\u03bf\u03c5', '\u039c\u03b1\u0390\u03bf\u03c5', '\u0399\u03bf\u03c5\u03bd\u03af\u03bf\u03c5',\r\n '\u0399\u03bf\u03c5\u03bb\u03af\u03bf\u03c5', '\u0391\u03c5\u03b3\u03bf\u03cd\u03c3\u03c4\u03bf\u03c5', '\u03a3\u03b5\u03c0\u03c4\u03b5\u03bc\u03b2\u03c1\u03af\u03bf\u03c5', '\u039f\u03ba\u03c4\u03c9\u03b2\u03c1\u03af\u03bf\u03c5', '\u039d\u03bf\u03b5\u03bc\u03b2\u03c1\u03af\u03bf\u03c5', '\u0394\u03b5\u03ba\u03b5\u03bc\u03b2\u03c1\u03af\u03bf\u03c5'\r\n ];\r\n\r\n this.selectedTimeSlotDate = new Date(this.selectedTimeSlot.date);\r\n\r\n const weekday = greekWeekdays[this.selectedTimeSlotDate.getDay()];\r\n const day = this.selectedTimeSlotDate.getDate();\r\n const month = greekMonths[this.selectedTimeSlotDate.getMonth()];\r\n const year = this.selectedTimeSlotDate.getFullYear();\r\n\r\n const dateStr = `${weekday}, ${day} ${month} ${year}`;\r\n\r\n appointmentDate.textContent = dateStr;\r\n appointmentTime.textContent = `${this.selectedTimeSlot.startTime.substring(0, 5)} - ${this.selectedTimeSlot.endTime.substring(0, 5)}`;\r\n\r\n confirmSection.style.display = 'block';\r\n confirmBtn.disabled = false;\r\n\r\n if (this.editMode) {\r\n confirmBtn.textContent = '\u0395\u03c0\u03b9\u03b2\u03b5\u03b2\u03b1\u03af\u03c9\u03c3\u03b7 - \u03a3\u03c5\u03bd\u03ad\u03c7\u03b5\u03b9\u03b1';\r\n }\r\n } else {\r\n confirmSection.style.display = 'block'; \/\/ HARDCODED\r\n confirmBtn.disabled = true;\r\n }\r\n }\r\n\r\n confirmAppointment() {\r\n if (!this.selectedTimeSlot) return;\r\n\r\n \/\/ Add appointment type to selected appointment data\r\n const appointmentData = {\r\n ...this.selectedTimeSlot,\r\n appointmentType: this.appointmentType\r\n };\r\n\r\n \/\/ Store selection in session storage\r\n sessionStorage.setItem('selectedAppointment', JSON.stringify(appointmentData));\r\n\r\n \/\/ Redirect to form\r\n if (this.editMode) {\r\n \/\/ Pass client key via URL for edit mode\r\n window.location.href = `\/rantevou\/app-client-form?key=${this.clientKey}`;\r\n } else {\r\n \/\/ Normal booking mode\r\n window.location.href = '\/rantevou\/app-client-form';\r\n }\r\n }\r\n\r\n render() {\r\n const year = this.currentDate.getFullYear();\r\n const month = this.currentDate.getMonth();\r\n\r\n \/\/ Update month\/year display\r\n document.getElementById('monthYear').textContent =\r\n `${this.monthNames[month]} ${year}`;\r\n\r\n \/\/ Update navigation buttons based on available months\r\n const currentMonthKey = `${year}-${(month + 1).toString().padStart(2, '0')}`;\r\n const prevMonthKey = `${month === 0 ? year - 1 : year}-${month === 0 ? '12' : month.toString().padStart(2, '0')}`;\r\n const nextMonthKey = `${month === 11 ? year + 1 : year}-${month === 11 ? '01' : (month + 2).toString().padStart(2, '0')}`;\r\n\r\n const prevBtn = document.getElementById('prevBtn');\r\n const nextBtn = document.getElementById('nextBtn');\r\n\r\n prevBtn.disabled = !this.monthsWithSlots.has(prevMonthKey) && !this.editMode;\r\n nextBtn.disabled = !this.monthsWithSlots.has(nextMonthKey) && !this.editMode;\r\n\r\n prevBtn.style.opacity = prevBtn.disabled ? '0.5' : '1';\r\n nextBtn.style.opacity = nextBtn.disabled ? '0.5' : '1';\r\n\r\n \/\/ Clear calendar grid\r\n const calendarGrid = document.getElementById('calendarGrid');\r\n calendarGrid.innerHTML = '';\r\n\r\n \/\/ Get calendar data\r\n const daysInMonth = this.getDaysInMonth(year, month);\r\n const firstDayOfMonth = this.getFirstDayOfMonth(year, month);\r\n\r\n \/\/ Get previous month data for leading days\r\n const prevMonth = month === 0 ? 11 : month - 1;\r\n const prevYear = month === 0 ? year - 1 : year;\r\n const daysInPrevMonth = this.getDaysInMonth(prevYear, prevMonth);\r\n\r\n \/\/ Get next month data for trailing days\r\n const nextMonth = month === 11 ? 0 : month + 1;\r\n const nextYear = month === 11 ? year + 1 : year;\r\n\r\n \/\/ Add leading days from previous month\r\n for (let i = firstDayOfMonth - 1; i >= 0; i--) {\r\n const day = daysInPrevMonth - i;\r\n const dayContainer = this.createDayContainer(day, false, prevYear, prevMonth);\r\n calendarGrid.appendChild(dayContainer);\r\n }\r\n\r\n \/\/ Add days of current month\r\n for (let day = 1; day <= daysInMonth; day++) {\r\n const dayContainer = this.createDayContainer(day, true, year, month);\r\n calendarGrid.appendChild(dayContainer);\r\n }\r\n\r\n \/\/ Add trailing days from next month to complete the grid\r\n const totalCells = calendarGrid.children.length;\r\n const remainingCells = 42 - totalCells; \/\/ 6 rows \u00d7 7 days = 42 cells\r\n\r\n for (let day = 1; day <= remainingCells; day++) {\r\n const dayContainer = this.createDayContainer(day, false, nextYear, nextMonth);\r\n calendarGrid.appendChild(dayContainer);\r\n }\r\n }\r\n }\r\n\r\n \/\/ Initialize client calendar when page loads\r\n document.addEventListener('DOMContentLoaded', () => {\r\n window.clientCalendar = new ClientCalendar();\r\n \r\n \/\/ Set up listener for appointment type changes\r\n document.addEventListener('appointmentTypeChanged', (event) => {\r\n if (window.clientCalendar) {\r\n window.clientCalendar.appointmentType = event.detail.appointmentType;\r\n window.clientCalendar.bookingMode = event.detail.bookingMode;\r\n window.clientCalendar.loadAvailableSlots();\r\n }\r\n });\r\n });\r\n\r\n \/\/ Global functions to be called from parent page\r\n window.showCalendarForHourBooking = function () {\r\n window.appointmentBookingMode = 'hour';\r\n localStorage.setItem('appointmentBookingMode', 'hour');\r\n\r\n if (window.clientCalendar) {\r\n window.clientCalendar.bookingMode = 'hour';\r\n \/\/ Don't call loadAvailableSlots here - let the appointment type manager handle it\r\n }\r\n\r\n \/\/ Show calendar container and hide intro\r\n const calendarBooking = document.getElementById('calendar-booking');\r\n const sinedriaIntro = document.getElementById('sinedria-intro');\r\n\r\n if (calendarBooking) {\r\n calendarBooking.style.display = 'block';\r\n }\r\n if (sinedriaIntro) sinedriaIntro.style.display = 'none';\r\n };\r\n\r\n window.showCalendarForHalfHourBooking = function () {\r\n window.appointmentBookingMode = 'half-hour';\r\n localStorage.setItem('appointmentBookingMode', 'half-hour');\r\n\r\n if (window.clientCalendar) {\r\n window.clientCalendar.bookingMode = 'half-hour';\r\n \/\/ Don't call loadAvailableSlots here - let the appointment type manager handle it\r\n }\r\n\r\n \/\/ Show calendar container and hide intro\r\n const calendarBooking = document.getElementById('calendar-booking');\r\n const sinedriaIntro = document.getElementById('sinedria-intro');\r\n\r\n if (calendarBooking) {\r\n calendarBooking.style.display = 'block';\r\n }\r\n if (sinedriaIntro) sinedriaIntro.style.display = 'none';\r\n };\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<section class=\"elementor-element elementor-element-987aa60 e-con-full elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-child\" data-id=\"987aa60\" data-element_type=\"container\" id=\"sinedria-intro\">\n\t\t<div class=\"elementor-element elementor-element-72c505b e-con-full e-flex e-con e-child\" data-id=\"72c505b\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9cce4f1 elementor-widget elementor-widget-heading\" data-id=\"9cce4f1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">\u039a\u03bb\u03b5\u03af\u03c3\u03c4\u03b5 \u03c0\u03c1\u03bf\u03c0\u03cc\u03bd\u03b7\u03c3\u03b7<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2fb2acd elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"2fb2acd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u039e\u03b5\u03ba\u03b9\u03bd\u03ac\u03bc\u03b5 \u03bc\u03b1\u03b6\u03af \u03c4\u03bf \u03c4\u03b1\u03be\u03af\u03b4\u03b9 \u03c3\u03bf\u03c5 \u03c0\u03c1\u03bf\u03c2 \u03c0\u03b9\u03bf \u03b9\u03c3\u03bf\u03c1\u03c1\u03bf\u03c0\u03b7\u03bc\u03ad\u03bd\u03b5\u03c2 \u03ba\u03b1\u03b9 \u03b2\u03b9\u03ce\u03c3\u03b9\u03bc\u03b5\u03c2 \u03b4\u03b9\u03b1\u03c4\u03c1\u03bf\u03c6\u03b9\u03ba\u03ad\u03c2 \u03c3\u03c5\u03bd\u03ae\u03b8\u03b5\u03b9\u03b5\u03c2, \u03bc\u03b5<strong> \u03b4\u03cd\u03bf \u03b1\u03c0\u03bb\u03ac \u03b2\u03ae\u03bc\u03b1\u03c4\u03b1<\/strong>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<section class=\"elementor-element elementor-element-8e6d284 e-con-full elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-child\" data-id=\"8e6d284\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-93bedc0 premium-title-icon-column premium-title-color elementor-widget elementor-widget-premium-addon-title\" data-id=\"93bedc0\" data-element_type=\"widget\" data-widget_type=\"premium-addon-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n\t\t<div class=\"premium-title-container style1\">\r\n\t\t\t<h3 class=\"premium-title-header premium-title-style1\">\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<svg class=\"premium-title-icon premium-svg-nodraw premium-drawable-icon e-font-icon-svg e-fas-building\" aria-hidden=\"true\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M436 480h-20V24c0-13.255-10.745-24-24-24H56C42.745 0 32 10.745 32 24v456H12c-6.627 0-12 5.373-12 12v20h448v-20c0-6.627-5.373-12-12-12zM128 76c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12V76zm0 96c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40zm52 148h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12zm76 160h-64v-84c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v84zm64-172c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40zm0-96c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40zm0-96c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12V76c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40z\"><\/path><\/svg>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"premium-title-text\" >\r\n\t\t\t\t\t\u03a3\u03c5\u03bd\u03b5\u03b4\u03c1\u03af\u03b1 \u03c3\u03c4\u03bf \u03b3\u03c1\u03b1\u03c6\u03b5\u03af\u03bf\t\t\t\t<\/span>\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t<\/h3>\r\n\t\t<\/div>\r\n\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0d0d856 e-con-full animated-slow e-flex e-con e-child\" data-id=\"0d0d856\" data-element_type=\"container\" data-settings=\"{"animation":"none"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4cb8e27 premium-lq__none elementor-widget elementor-widget-premium-addon-button\" data-id=\"4cb8e27\" data-element_type=\"widget\" id=\"grafeio-1\" data-widget_type=\"premium-addon-button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n\r\n\t\t<a class=\"premium-button premium-button-style1 premium-btn-lg premium-button-style1-right\">\r\n\t\t\t<div class=\"premium-button-text-icon-wrapper\">\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<svg class=\"svg-inline--far-fa-calendar-check premium-drawable-icon premium-svg-nodraw\" aria-hidden='true' xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 448 512'><path d=\"M400 64h-48V12c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v52H160V12c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v52H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 400H54a6 6 0 0 1-6-6V160h352v298a6 6 0 0 1-6 6zm-52.849-200.65L198.842 404.519c-4.705 4.667-12.303 4.637-16.971-.068l-75.091-75.699c-4.667-4.705-4.637-12.303.068-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l44.104 44.461 111.072-110.181c4.705-4.667 12.303-4.637 16.971.068l22.536 22.718c4.667 4.705 4.636 12.303-.069 16.97z\"><\/path><\/svg>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t<span >\r\n\t\t\t\t\t\t\u039a\u03bb\u03b5\u03af\u03c3\u03b5 \u0394\u03b9\u03b1 \u03b6\u03ce\u03c3\u03b7\u03c2 - 1\u03b7 \u03a3\u03c5\u03bd\u03b5\u03b4\u03c1\u03af\u03b1\t\t\t\t\t<\/span>\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t<\/a>\r\n\r\n\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd8ad95 elementor-widget elementor-widget-text-editor\" data-id=\"bd8ad95\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #22adc0;\"><strong>\u0394\u03b9\u03ac\u03c1\u03ba\u03b5\u03b9\u03b1<\/strong><\/span>: \u03ad\u03c9\u03c2 1 \u03ce\u03c1\u03b1 \u00b7 <span style=\"color: #22adc0;\"><strong>\u039a\u03cc\u03c3\u03c4\u03bf\u03c2<\/strong><\/span>: \u20ac 40.00<br \/>\u03a3\u03b5 \u03c0\u03b5\u03c1\u03b9\u03bc\u03ad\u03bd\u03c9 \u03c3\u03c4\u03bf \u03b3\u03c1\u03b1\u03c6\u03b5\u03af\u03bf \u03b3\u03b9\u03b1 \u03bc\u03b9\u03b1 \u03bf\u03bb\u03bf\u03ba\u03bb\u03b7\u03c1\u03c9\u03bc\u03ad\u03bd\u03b7 \u03c0\u03c1\u03ce\u03c4\u03b7 \u03c3\u03c5\u03bd\u03b5\u03b4\u03c1\u03af\u03b1, \u03cc\u03c0\u03bf\u03c5 \u03b8\u03b1 \u03c3\u03b5 \u03b3\u03bd\u03c9\u03c1\u03af\u03c3\u03c9 \u03c3\u03b5 \u03b2\u03ac\u03b8\u03bf\u03c2 \u03ba\u03b1\u03b9 \u03b8\u03b1 \u03b8\u03ad\u03c3\u03bf\u03c5\u03bc\u03b5 \u03bc\u03b1\u03b6\u03af \u03b5\u03c6\u03b1\u03c1\u03bc\u03cc\u03c3\u03b9\u03bc\u03bf\u03c5\u03c2 \u03c3\u03c4\u03cc\u03c7\u03bf\u03c5\u03c2.<\/p><p><strong>\u03a0\u03b5\u03c1\u03b9\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03b5\u03b9<\/strong>:<\/p><ul><li>\u039b\u03ae\u03c8\u03b7 \u03b9\u03b1\u03c4\u03c1\u03b9\u03ba\u03bf\u03cd & \u03b4\u03b9\u03b1\u03c4\u03c1\u03bf\u03c6\u03b9\u03ba\u03bf\u03cd \u03b9\u03c3\u03c4\u03bf\u03c1\u03b9\u03ba\u03bf\u03cd<\/li><li>\u039a\u03b1\u03b8\u03bf\u03c1\u03b9\u03c3\u03bc\u03cc \u03c3\u03c4\u03cc\u03c7\u03c9\u03bd<\/li><li>\u0391\u03be\u03b9\u03bf\u03bb\u03cc\u03b3\u03b7\u03c3\u03b7 \u03c3\u03cd\u03c3\u03c4\u03b1\u03c3\u03b7\u03c2 \u03c3\u03ce\u03bc\u03b1\u03c4\u03bf\u03c2<\/li><li>\u0395\u03be\u03b1\u03c4\u03bf\u03bc\u03b9\u03ba\u03b5\u03c5\u03bc\u03ad\u03bd\u03bf \u03c0\u03bb\u03ac\u03bd\u03bf \u03b4\u03b9\u03b1\u03c4\u03c1\u03bf\u03c6\u03ae\u03c2 (\u03b1\u03c0\u03bf\u03c3\u03c4\u03ad\u03bb\u03bb\u03b5\u03c4\u03b1\u03b9 \u03b5\u03bd\u03c4\u03cc\u03c2 24 \u03c9\u03c1\u03ce\u03bd \u03b1\u03c0\u03cc \u03c4\u03b7 \u03bb\u03ae\u03be\u03b7 \u03c4\u03bf\u03c5 \u03c1\u03b1\u03bd\u03c4\u03b5\u03b2\u03bf\u03cd)<\/li><\/ul><p>\u26a0\ufe0f\u03a0\u03c1\u03bf\u03c3\u03bf\u03c7\u03ae: \u0393\u03b9\u03b1 \u03c4\u03b7\u03bd \u03b1\u03ba\u03c1\u03af\u03b2\u03b5\u03b9\u03b1 \u03c4\u03b7\u03c2 \u03bc\u03ad\u03c4\u03c1\u03b7\u03c3\u03b7\u03c2 \u03c3\u03cd\u03c3\u03c4\u03b1\u03c3\u03b7\u03c2 \u03c3\u03ce\u03bc\u03b1\u03c4\u03bf\u03c2, \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03b7\u03bc\u03b1\u03bd\u03c4\u03b9\u03ba\u03cc \u03bd\u03b1 \u03bc\u03b7\u03bd \u03ad\u03c7\u03b5\u03b9 \u03c0\u03c1\u03bf\u03b7\u03b3\u03b7\u03b8\u03b5\u03af \u03ba\u03b1\u03c4\u03b1\u03bd\u03ac\u03bb\u03c9\u03c3\u03b7 \u03c4\u03c1\u03bf\u03c6\u03ae\u03c2 \u03ae \u03c5\u03b3\u03c1\u03ce\u03bd \u03ad\u03c9\u03c2 \u03ba\u03b1\u03b9 2 \u03ce\u03c1\u03b5\u03c2 \u03c0\u03c1\u03b9\u03bd \u03c4\u03bf \u03c1\u03b1\u03bd\u03c4\u03b5\u03b2\u03bf\u03cd.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-357d91f e-con-full animated-slow e-flex e-con e-child\" data-id=\"357d91f\" data-element_type=\"container\" data-settings=\"{"animation":"none"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ae72379 premium-lq__none elementor-widget elementor-widget-premium-addon-button\" data-id=\"ae72379\" data-element_type=\"widget\" id=\"grafeio-2\" data-widget_type=\"premium-addon-button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n\r\n\t\t<a class=\"premium-button premium-button-style1 premium-btn-lg premium-button-style1-right\">\r\n\t\t\t<div class=\"premium-button-text-icon-wrapper\">\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<svg class=\"svg-inline--far-fa-calendar-check premium-drawable-icon premium-svg-nodraw\" aria-hidden='true' xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 448 512'><path d=\"M400 64h-48V12c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v52H160V12c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v52H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 400H54a6 6 0 0 1-6-6V160h352v298a6 6 0 0 1-6 6zm-52.849-200.65L198.842 404.519c-4.705 4.667-12.303 4.637-16.971-.068l-75.091-75.699c-4.667-4.705-4.637-12.303.068-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l44.104 44.461 111.072-110.181c4.705-4.667 12.303-4.637 16.971.068l22.536 22.718c4.667 4.705 4.636 12.303-.069 16.97z\"><\/path><\/svg>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t<span >\r\n\t\t\t\t\t\t\u039a\u03bb\u03b5\u03af\u03c3\u03b5 \u0394\u03b9\u03b1 \u03b6\u03ce\u03c3\u03b7\u03c2 - \u0395\u03c0\u03b1\u03bd\u03b1\u03bb\u03b7\u03c0\u03c4\u03b9\u03ba\u03ae \u03a3\u03c5\u03bd\u03b5\u03b4\u03c1\u03af\u03b1\t\t\t\t\t<\/span>\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t<\/a>\r\n\r\n\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2999836 elementor-widget elementor-widget-text-editor\" data-id=\"2999836\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #22adc0;\"><strong>\u0394\u03b9\u03ac\u03c1\u03ba\u03b5\u03b9\u03b1<\/strong><\/span>: 30 \u03bb\u03b5\u03c0\u03c4\u03ac \u00b7 <span style=\"color: #22adc0;\"><strong>\u039a\u03cc\u03c3\u03c4\u03bf\u03c2<\/strong><\/span>: \u20ac 20.00-30.00<br \/>\u039f\u03b9 \u03b5\u03c0\u03b1\u03bd\u03b1\u03bb\u03b7\u03c0\u03c4\u03b9\u03ba\u03ad\u03c2 \u03c3\u03c5\u03bd\u03b5\u03b4\u03c1\u03af\u03b5\u03c2 \u03bc\u03b1\u03c2 \u03b2\u03bf\u03b7\u03b8\u03bf\u03cd\u03bd \u03bd\u03b1 \u03b4\u03b9\u03b1\u03c4\u03b7\u03c1\u03bf\u03cd\u03bc\u03b5 \u03c4\u03b7\u03bd \u03c0\u03c1\u03cc\u03bf\u03b4\u03cc \u03c3\u03bf\u03c5 \u03c3\u03b5 \u03c4\u03c1\u03bf\u03c7\u03b9\u03ac \u03ba\u03b1\u03b9 \u03bd\u03b1 \u03c0\u03c1\u03bf\u03c3\u03b1\u03c1\u03bc\u03cc\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf \u03c0\u03bb\u03ac\u03bd\u03bf \u03c3\u03bf\u03c5 \u03c3\u03cd\u03bc\u03c6\u03c9\u03bd\u03b1 \u03bc\u03b5 \u03c4\u03b9\u03c2 \u03b1\u03bd\u03ac\u03b3\u03ba\u03b5\u03c2 \u03c3\u03bf\u03c5.<\/p><p><strong>\u03a0\u03b5\u03c1\u03b9\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03b5\u03b9<\/strong>:<\/p><ul><li>\u0391\u03be\u03b9\u03bf\u03bb\u03cc\u03b3\u03b7\u03c3\u03b7 \u03c4\u03b7\u03c2 \u03c0\u03c1\u03bf\u03b7\u03b3\u03bf\u03cd\u03bc\u03b5\u03bd\u03b7\u03c2 \u03c0\u03b5\u03c1\u03b9\u03cc\u03b4\u03bf\u03c5<\/li><li>\u03a0\u03c1\u03bf\u03c3\u03b1\u03c1\u03bc\u03bf\u03b3\u03ae \u03c4\u03bf\u03c5 \u03b4\u03b9\u03b1\u03c4\u03c1\u03bf\u03c6\u03b9\u03ba\u03bf\u03cd \u03c0\u03bb\u03ac\u03bd\u03bf\u03c5<\/li><li>\u03a3\u03c5\u03b6\u03ae\u03c4\u03b7\u03c3\u03b7 \u03c4\u03c5\u03c7\u03cc\u03bd \u03b5\u03bc\u03c0\u03bf\u03b4\u03af\u03c9\u03bd & \u03b4\u03c5\u03c3\u03ba\u03bf\u03bb\u03b9\u03ce\u03bd<\/li><li>\u0395\u03c0\u03b1\u03bd\u03b5\u03be\u03ad\u03c4\u03b1\u03c3\u03b7 \u03c3\u03cd\u03c3\u03c4\u03b1\u03c3\u03b7\u03c2 \u03c3\u03ce\u03bc\u03b1\u03c4\u03bf\u03c2<\/li><\/ul><p>\u26a0\ufe0f\u03a0\u03c1\u03bf\u03c3\u03bf\u03c7\u03ae: \u0393\u03b9\u03b1 \u03c4\u03b7\u03bd \u03b1\u03ba\u03c1\u03af\u03b2\u03b5\u03b9\u03b1 \u03c4\u03b7\u03c2 \u03bc\u03ad\u03c4\u03c1\u03b7\u03c3\u03b7\u03c2 \u03c3\u03cd\u03c3\u03c4\u03b1\u03c3\u03b7\u03c2 \u03c3\u03ce\u03bc\u03b1\u03c4\u03bf\u03c2, \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03b7\u03bc\u03b1\u03bd\u03c4\u03b9\u03ba\u03cc \u03bd\u03b1 \u03bc\u03b7\u03bd \u03ad\u03c7\u03b5\u03b9 \u03c0\u03c1\u03bf\u03b7\u03b3\u03b7\u03b8\u03b5\u03af \u03ba\u03b1\u03c4\u03b1\u03bd\u03ac\u03bb\u03c9\u03c3\u03b7 \u03c4\u03c1\u03bf\u03c6\u03ae\u03c2 \u03ae \u03c5\u03b3\u03c1\u03ce\u03bd \u03ad\u03c9\u03c2 \u03ba\u03b1\u03b9 2 \u03ce\u03c1\u03b5\u03c2 \u03c0\u03c1\u03b9\u03bd \u03c4\u03bf \u03c1\u03b1\u03bd\u03c4\u03b5\u03b2\u03bf\u03cd.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t<section class=\"elementor-element elementor-element-8de07a5 e-con-full elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-child\" data-id=\"8de07a5\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-23a5237 premium-title-icon-column premium-title-color elementor-widget elementor-widget-premium-addon-title\" data-id=\"23a5237\" data-element_type=\"widget\" data-widget_type=\"premium-addon-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n\t\t<div class=\"premium-title-container style1\">\r\n\t\t\t<h3 class=\"premium-title-header premium-title-style1\">\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<svg class=\"premium-title-icon premium-svg-nodraw premium-drawable-icon e-font-icon-svg e-fas-desktop\" aria-hidden=\"true\" viewBox=\"0 0 576 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z\"><\/path><\/svg>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"premium-title-text\" >\r\n\t\t\t\t\t\u0391\u03c0\u03bf\u03bc\u03b1\u03ba\u03c1\u03c5\u03c3\u03bc\u03ad\u03bd\u03b7 \u03c3\u03c5\u03bd\u03b5\u03b4\u03c1\u03af\u03b1\t\t\t\t<\/span>\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t<\/h3>\r\n\t\t<\/div>\r\n\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-885ee97 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"885ee97\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><em>\ud83d\udcf1 \u039f\u03b9 \u03c3\u03c5\u03bd\u03b5\u03b4\u03c1\u03af\u03b5\u03c2 \u03bc\u03b1\u03c2 \u03c0\u03c1\u03b1\u03b3\u03bc\u03b1\u03c4\u03bf\u03c0\u03bf\u03b9\u03bf\u03cd\u03bd\u03c4\u03b1\u03b9 \u03bc\u03ad\u03c3\u03c9 Viber.<\/em><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6b4fa52 e-con-full animated-slow e-flex e-con e-child\" data-id=\"6b4fa52\" data-element_type=\"container\" data-settings=\"{"animation":"none"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eefc14d premium-lq__none elementor-widget elementor-widget-premium-addon-button\" data-id=\"eefc14d\" data-element_type=\"widget\" id=\"online-1\" data-widget_type=\"premium-addon-button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n\r\n\t\t<a class=\"premium-button premium-button-style1 premium-btn-lg premium-button-style1-right\">\r\n\t\t\t<div class=\"premium-button-text-icon-wrapper\">\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<svg class=\"svg-inline--far-fa-calendar-check premium-drawable-icon premium-svg-nodraw\" aria-hidden='true' xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 448 512'><path d=\"M400 64h-48V12c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v52H160V12c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v52H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 400H54a6 6 0 0 1-6-6V160h352v298a6 6 0 0 1-6 6zm-52.849-200.65L198.842 404.519c-4.705 4.667-12.303 4.637-16.971-.068l-75.091-75.699c-4.667-4.705-4.637-12.303.068-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l44.104 44.461 111.072-110.181c4.705-4.667 12.303-4.637 16.971.068l22.536 22.718c4.667 4.705 4.636 12.303-.069 16.97z\"><\/path><\/svg>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t<span >\r\n\t\t\t\t\t\t\u039a\u03bb\u03b5\u03af\u03c3\u03b5 \u0395\u03be' \u03b1\u03c0\u03bf\u03c3\u03c4\u03ac\u03c3\u03b5\u03c9\u03c2 - 1\u03b7 \u03a3\u03c5\u03bd\u03b5\u03b4\u03c1\u03af\u03b1\t\t\t\t\t<\/span>\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t<\/a>\r\n\r\n\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e29039 elementor-widget elementor-widget-text-editor\" data-id=\"1e29039\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #22adc0;\"><strong>\u0394\u03b9\u03ac\u03c1\u03ba\u03b5\u03b9\u03b1<\/strong><\/span>: \u03ad\u03c9\u03c2 1 \u03ce\u03c1\u03b1 \u00b7 <span style=\"color: #22adc0;\"><strong>\u039a\u03cc\u03c3\u03c4\u03bf\u03c2<\/strong><\/span>: \u20ac 40.00<br \/>\u0397 \u03c0\u03c1\u03ce\u03c4\u03b7 \u03bc\u03b1\u03c2 \u03c3\u03c5\u03bd\u03b5\u03b4\u03c1\u03af\u03b1 \u03b3\u03af\u03bd\u03b5\u03c4\u03b1\u03b9 \u03bc\u03b5 \u03b1\u03c3\u03c6\u03ac\u03bb\u03b5\u03b9\u03b1 \u03b1\u03c0\u03cc \u03c4\u03bf\u03bd \u03c7\u03ce\u03c1\u03bf \u03c3\u03bf\u03c5, \u03c7\u03c9\u03c1\u03af\u03c2 \u03ba\u03b1\u03bc\u03af\u03b1 \u03ad\u03ba\u03c0\u03c4\u03c9\u03c3\u03b7 \u03c3\u03c4\u03b7\u03bd \u03c0\u03bf\u03b9\u03cc\u03c4\u03b7\u03c4\u03b1.<\/p><p><strong>\u03a0\u03b5\u03c1\u03b9\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03b5\u03b9<\/strong>:<\/p><ul><li>\u039b\u03ae\u03c8\u03b7 \u03b9\u03b1\u03c4\u03c1\u03b9\u03ba\u03bf\u03cd & \u03b4\u03b9\u03b1\u03c4\u03c1\u03bf\u03c6\u03b9\u03ba\u03bf\u03cd \u03b9\u03c3\u03c4\u03bf\u03c1\u03b9\u03ba\u03bf\u03cd<\/li><li>\u039a\u03b1\u03b8\u03bf\u03c1\u03b9\u03c3\u03bc\u03cc \u03c3\u03c4\u03cc\u03c7\u03c9\u03bd<\/li><li>\u0391\u03be\u03b9\u03bf\u03bb\u03cc\u03b3\u03b7\u03c3\u03b7 \u03c3\u03cd\u03c3\u03c4\u03b1\u03c3\u03b7\u03c2 \u03c3\u03ce\u03bc\u03b1\u03c4\u03bf\u03c2 (\u03bc\u03ad\u03c3\u03c9 \u03b5\u03c1\u03c9\u03c4\u03b7\u03bc\u03b1\u03c4\u03bf\u03bb\u03bf\u03b3\u03af\u03bf\u03c5 & \u03ba\u03b1\u03b8\u03bf\u03b4\u03ae\u03b3\u03b7\u03c3\u03b7\u03c2)<\/li><li>\u0395\u03be\u03b1\u03c4\u03bf\u03bc\u03b9\u03ba\u03b5\u03c5\u03bc\u03ad\u03bd\u03bf \u03c0\u03bb\u03ac\u03bd\u03bf \u03b4\u03b9\u03b1\u03c4\u03c1\u03bf\u03c6\u03ae\u03c2 (\u03b1\u03c0\u03bf\u03c3\u03c4\u03ad\u03bb\u03bb\u03b5\u03c4\u03b1\u03b9 \u03b5\u03bd\u03c4\u03cc\u03c2 24 \u03c9\u03c1\u03ce\u03bd \u03b1\u03c0\u03cc \u03c4\u03b7 \u03bb\u03ae\u03be\u03b7 \u03c4\u03bf\u03c5 \u03c1\u03b1\u03bd\u03c4\u03b5\u03b2\u03bf\u03cd)<\/li><\/ul><p>\u26a0\ufe0f\u03a0\u03c1\u03bf\u03c3\u03bf\u03c7\u03ae: \u0393\u03b9\u03b1 \u03c4\u03b7\u03bd \u03b1\u03be\u03b9\u03bf\u03bb\u03cc\u03b3\u03b7\u03c3\u03b7 \u03c3\u03cd\u03c3\u03c4\u03b1\u03c3\u03b7\u03c2 \u03c3\u03ce\u03bc\u03b1\u03c4\u03bf\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b1\u03c0\u03b1\u03c1\u03b1\u03af\u03c4\u03b7\u03c4\u03b7 \u03b7\u03bb\u03b5\u03ba\u03c4\u03c1\u03bf\u03bd\u03b9\u03ba\u03ae \u03ae \u03b1\u03bd\u03b1\u03bb\u03bf\u03b3\u03b9\u03ba\u03ae \u03b6\u03c5\u03b3\u03b1\u03c1\u03b9\u03ac \u03ba\u03b1\u03b9 \u03bc\u03b5\u03b6\u03bf\u03cd\u03c1\u03b1.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6c9ce76 e-con-full animated-slow e-flex e-con e-child\" data-id=\"6c9ce76\" data-element_type=\"container\" data-settings=\"{"animation":"none"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-26f19ec premium-lq__none elementor-widget elementor-widget-premium-addon-button\" data-id=\"26f19ec\" data-element_type=\"widget\" id=\"online-2\" data-widget_type=\"premium-addon-button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n\r\n\t\t<a class=\"premium-button premium-button-style1 premium-btn-lg premium-button-style1-right\">\r\n\t\t\t<div class=\"premium-button-text-icon-wrapper\">\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<svg class=\"svg-inline--far-fa-calendar-check premium-drawable-icon premium-svg-nodraw\" aria-hidden='true' xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 448 512'><path d=\"M400 64h-48V12c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v52H160V12c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v52H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 400H54a6 6 0 0 1-6-6V160h352v298a6 6 0 0 1-6 6zm-52.849-200.65L198.842 404.519c-4.705 4.667-12.303 4.637-16.971-.068l-75.091-75.699c-4.667-4.705-4.637-12.303.068-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l44.104 44.461 111.072-110.181c4.705-4.667 12.303-4.637 16.971.068l22.536 22.718c4.667 4.705 4.636 12.303-.069 16.97z\"><\/path><\/svg>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t<span >\r\n\t\t\t\t\t\t\u039a\u03bb\u03b5\u03af\u03c3\u03b5 \u0395\u03be' \u03b1\u03c0\u03bf\u03c3\u03c4\u03ac\u03c3\u03b5\u03c9\u03c2 - \u0395\u03c0\u03b1\u03bd\u03b1\u03bb\u03b7\u03c0\u03c4\u03b9\u03ba\u03ae \u03a3\u03c5\u03bd\u03b5\u03b4\u03c1\u03af\u03b1\t\t\t\t\t<\/span>\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t<\/a>\r\n\r\n\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dba6552 elementor-widget elementor-widget-text-editor\" data-id=\"dba6552\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #22adc0;\"><strong>\u0394\u03b9\u03ac\u03c1\u03ba\u03b5\u03b9\u03b1<\/strong><\/span>: 30 \u03bb\u03b5\u03c0\u03c4\u03ac \u00b7 <span style=\"color: #22adc0;\"><strong>\u039a\u03cc\u03c3\u03c4\u03bf\u03c2<\/strong><\/span>: \u20ac 20.00-30.00<br \/>\u0393\u03b9\u03b1 \u03c3\u03ad\u03bd\u03b1 \u03c0\u03bf\u03c5 \u03c0\u03c1\u03bf\u03c4\u03b9\u03bc\u03ac\u03c2 \u03c4\u03b7\u03bd \u03ac\u03bd\u03b5\u03c3\u03b7 \u03c4\u03bf\u03c5 \u03c3\u03c0\u03b9\u03c4\u03b9\u03bf\u03cd \u03c3\u03bf\u03c5, \u03c3\u03c5\u03bd\u03b5\u03c7\u03af\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03b7\u03bd \u03c0\u03b1\u03c1\u03b1\u03ba\u03bf\u03bb\u03bf\u03cd\u03b8\u03b7\u03c3\u03b7 \u03bc\u03b5 \u03c4\u03b7\u03bd \u03af\u03b4\u03b9\u03b1 \u03c3\u03c5\u03bd\u03ad\u03c0\u03b5\u03b9\u03b1.<\/p><p><strong>\u03a0\u03b5\u03c1\u03b9\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03b5\u03b9<\/strong>:<\/p><ul><li>\u0391\u03be\u03b9\u03bf\u03bb\u03cc\u03b3\u03b7\u03c3\u03b7 \u03c4\u03b7\u03c2 \u03c0\u03c1\u03bf\u03b7\u03b3\u03bf\u03cd\u03bc\u03b5\u03bd\u03b7\u03c2 \u03c0\u03b5\u03c1\u03b9\u03cc\u03b4\u03bf\u03c5<\/li><li>\u03a0\u03c1\u03bf\u03c3\u03b1\u03c1\u03bc\u03bf\u03b3\u03ae \u03c4\u03bf\u03c5 \u03b4\u03b9\u03b1\u03c4\u03c1\u03bf\u03c6\u03b9\u03ba\u03bf\u03cd \u03c0\u03bb\u03ac\u03bd\u03bf\u03c5<\/li><li>\u03a3\u03c5\u03b6\u03ae\u03c4\u03b7\u03c3\u03b7 \u03c4\u03c5\u03c7\u03cc\u03bd \u03b5\u03bc\u03c0\u03bf\u03b4\u03af\u03c9\u03bd & \u03b4\u03c5\u03c3\u03ba\u03bf\u03bb\u03b9\u03ce\u03bd<\/li><li>\u039a\u03b1\u03b8\u03bf\u03b4\u03ae\u03b3\u03b7\u03c3\u03b7 \u03b3\u03b9\u03b1 \u03c3\u03c9\u03bc\u03b1\u03c4\u03b9\u03ba\u03ae \u03b1\u03be\u03b9\u03bf\u03bb\u03cc\u03b3\u03b7\u03c3\u03b7 (\u03b5\u03ac\u03bd \u03c7\u03c1\u03b5\u03b9\u03b1\u03c3\u03c4\u03b5\u03af)<\/li><\/ul><p>\u26a0\ufe0f\u03a0\u03c1\u03bf\u03c3\u03bf\u03c7\u03ae: \u0393\u03b9\u03b1 \u03c4\u03b7\u03bd \u03b1\u03be\u03b9\u03bf\u03bb\u03cc\u03b3\u03b7\u03c3\u03b7 \u03c3\u03cd\u03c3\u03c4\u03b1\u03c3\u03b7\u03c2 \u03c3\u03ce\u03bc\u03b1\u03c4\u03bf\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b1\u03c0\u03b1\u03c1\u03b1\u03af\u03c4\u03b7\u03c4\u03b7 \u03b7\u03bb\u03b5\u03ba\u03c4\u03c1\u03bf\u03bd\u03b9\u03ba\u03ae \u03ae \u03b1\u03bd\u03b1\u03bb\u03bf\u03b3\u03b9\u03ba\u03ae \u03b6\u03c5\u03b3\u03b1\u03c1\u03b9\u03ac \u03ba\u03b1\u03b9 \u03bc\u03b5\u03b6\u03bf\u03cd\u03c1\u03b1.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-d2602b7 e-con-full e-flex e-con e-child\" data-id=\"d2602b7\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-93d33c3 elementor-widget elementor-widget-html\" data-id=\"93d33c3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>\r\n\/**\r\n * Appointment Type Manager\r\n * Comprehensive handler for appointment type selection and WordPress integration\r\n * Combines URL parameter management with calendar widget integration\r\n * For use in WordPress pages with appointment type buttons\r\n *\/\r\n\r\nclass AppointmentTypeManager {\r\n constructor() {\r\n this.appointmentTypes = {\r\n 'grafeio-1': '\u0394\u03b9\u03b1 \u03b6\u03ce\u03c3\u03b7\u03c2 - \u03a0\u03c1\u03ce\u03c4\u03b7 \u03c3\u03c5\u03bd\u03b5\u03b4\u03c1\u03af\u03b1',\r\n 'grafeio-2': '\u0394\u03b9\u03b1 \u03b6\u03ce\u03c3\u03b7\u03c2 - \u0395\u03c0\u03b1\u03bd\u03b1\u03bb\u03b7\u03c0\u03c4\u03b9\u03ba\u03ae \u03c3\u03c5\u03bd\u03b5\u03b4\u03c1\u03af\u03b1',\r\n 'online-1': 'Online - \u03a0\u03c1\u03ce\u03c4\u03b7 \u03c3\u03c5\u03bd\u03b5\u03b4\u03c1\u03af\u03b1',\r\n 'online-2': 'Online - \u0395\u03c0\u03b1\u03bd\u03b1\u03bb\u03b7\u03c0\u03c4\u03b9\u03ba\u03ae \u03c3\u03c5\u03bd\u03b5\u03b4\u03c1\u03af\u03b1'\r\n };\r\n \r\n \/\/ Mapping for booking modes (hour vs half-hour)\r\n this.bookingModes = {\r\n 'grafeio-1': 'hour', \/\/ 1-hour office appointment\r\n 'grafeio-2': 'half-hour', \/\/ 30-minute office appointment\r\n 'online-1': 'hour', \/\/ 1-hour online appointment\r\n 'online-2': 'half-hour' \/\/ 30-minute online appointment\r\n };\r\n \r\n this.initialized = false;\r\n this.init();\r\n }\r\n\r\n init() {\r\n \/\/ Prevent double initialization\r\n if (this.initialized) {\r\n return;\r\n }\r\n \r\n \/\/ Set up button event listeners only once\r\n this.setupButtonListeners();\r\n \r\n \/\/ Check for existing appointment type in URL\r\n this.checkUrlForAppointmentType();\r\n \r\n \/\/ Highlight active button based on URL parameter\r\n this.highlightActiveButton();\r\n \r\n this.initialized = true;\r\n }\r\n\r\n setupButtonListeners() {\r\n const buttons = ['grafeio-1', 'grafeio-2', 'online-1', 'online-2'];\r\n \r\n buttons.forEach(buttonId => {\r\n const button = document.getElementById(buttonId);\r\n if (button && !button.hasAttribute('data-appointment-listener')) {\r\n \/\/ Mark button as having listener to prevent duplicates\r\n button.setAttribute('data-appointment-listener', 'true');\r\n \r\n button.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.handleButtonClick(buttonId);\r\n });\r\n }\r\n });\r\n }\r\n\r\n handleButtonClick(appointmentType) {\r\n \/\/ First, select the appointment type (updates URL, highlights button, etc.)\r\n this.selectAppointmentType(appointmentType);\r\n \r\n \/\/ Then handle the calendar display based on booking mode\r\n const bookingMode = this.bookingModes[appointmentType] || 'hour';\r\n \r\n \/\/ Set the appointment type for the calendar widget\r\n if (window.clientCalendar) {\r\n window.clientCalendar.appointmentType = appointmentType;\r\n }\r\n \r\n \/\/ Show and refresh the calendar\r\n this.showAndRefreshCalendar(appointmentType, bookingMode);\r\n }\r\n\r\n showAndRefreshCalendar(appointmentType, bookingMode) {\r\n \/\/ Set booking mode for the calendar\r\n window.appointmentBookingMode = bookingMode;\r\n localStorage.setItem('appointmentBookingMode', bookingMode);\r\n \r\n \/\/ Update calendar instance if it exists\r\n if (window.clientCalendar) {\r\n window.clientCalendar.bookingMode = bookingMode;\r\n window.clientCalendar.appointmentType = appointmentType;\r\n }\r\n \r\n \/\/ Show calendar container\r\n this.showCalendar();\r\n \r\n \/\/ Refresh calendar to load slots for the selected appointment type\r\n this.refreshCalendar();\r\n \r\n \/\/ Call WordPress-specific functions if they exist\r\n if (bookingMode === 'hour') {\r\n if (typeof window.showCalendarForHourBooking === 'function') {\r\n window.showCalendarForHourBooking();\r\n }\r\n } else if (bookingMode === 'half-hour') {\r\n if (typeof window.showCalendarForHalfHourBooking === 'function') {\r\n window.showCalendarForHalfHourBooking();\r\n }\r\n }\r\n }\r\n\r\n selectAppointmentType(appointmentType) {\r\n \/\/ Update URL parameter\r\n this.updateUrlParameter('appointment_type', appointmentType);\r\n \r\n \/\/ Highlight selected button\r\n this.highlightActiveButton();\r\n \r\n \/\/ Store in sessionStorage as backup\r\n sessionStorage.setItem('selectedAppointmentType', appointmentType);\r\n }\r\n\r\n updateUrlParameter(key, value) {\r\n const url = new URL(window.location);\r\n url.searchParams.set(key, value);\r\n window.history.replaceState({}, '', url);\r\n }\r\n\r\n getAppointmentTypeFromUrl() {\r\n const urlParams = new URLSearchParams(window.location.search);\r\n return urlParams.get('appointment_type');\r\n }\r\n\r\n checkUrlForAppointmentType() {\r\n const appointmentType = this.getAppointmentTypeFromUrl();\r\n if (appointmentType && this.appointmentTypes[appointmentType]) {\r\n \/\/ Store in sessionStorage\r\n sessionStorage.setItem('selectedAppointmentType', appointmentType);\r\n \r\n \/\/ Set booking mode\r\n const bookingMode = this.bookingModes[appointmentType] || 'hour';\r\n localStorage.setItem('appointmentBookingMode', bookingMode);\r\n }\r\n }\r\n\r\n highlightActiveButton() {\r\n const appointmentType = this.getAppointmentTypeFromUrl();\r\n const buttons = ['grafeio-1', 'grafeio-2', 'online-1', 'online-2'];\r\n \r\n buttons.forEach(buttonId => {\r\n const button = document.getElementById(buttonId);\r\n if (button) {\r\n if (buttonId === appointmentType) {\r\n button.classList.add('active', 'selected');\r\n \/\/button.style.backgroundColor = '#28a745';\r\n button.style.color = 'white';\r\n button.style.fontWeight = 'bold';\r\n button.style.border = '5px solid #28a745';\r\n button.style.borderRadius = '100px';\r\n button.style.transform = 'scale(1.02)';\r\n } else {\r\n button.classList.remove('active', 'selected');\r\n button.style.backgroundColor = '';\r\n button.style.color = '';\r\n button.style.fontWeight = '';\r\n button.style.border = '';\r\n button.style.transform = '';\r\n }\r\n }\r\n });\r\n }\r\n\r\n showCalendar() {\r\n \/\/ Show calendar container if it exists\r\n const calendarContainer = document.querySelector('#calendar-booking');\r\n if (calendarContainer) {\r\n calendarContainer.style.display = 'block';\r\n \r\n \/\/ Scroll to calendar with smooth animation\r\n setTimeout(() => {\r\n calendarContainer.scrollIntoView({ \r\n behavior: 'smooth',\r\n block: 'start'\r\n });\r\n }, 100);\r\n }\r\n \r\n \/\/ Also try other possible calendar container selectors\r\n const altContainers = document.querySelectorAll('.calendar-container, #appointment-calendar, .appointment-calendar');\r\n altContainers.forEach(container => {\r\n if (container) {\r\n container.style.display = 'block';\r\n }\r\n });\r\n }\r\n\r\n refreshCalendar() {\r\n const appointmentType = this.getAppointmentTypeFromUrl();\r\n const bookingMode = this.bookingModes[appointmentType] || 'hour';\r\n \r\n \/\/ Update calendar instance if it exists\r\n if (window.clientCalendar) {\r\n window.clientCalendar.appointmentType = appointmentType;\r\n window.clientCalendar.bookingMode = bookingMode;\r\n window.clientCalendar.loadAvailableSlots();\r\n }\r\n \r\n \/\/ Dispatch custom event for calendar widget\r\n const event = new CustomEvent('appointmentTypeChanged', {\r\n detail: {\r\n appointmentType: appointmentType,\r\n typeName: this.getAppointmentTypeName(appointmentType),\r\n bookingMode: bookingMode\r\n }\r\n });\r\n document.dispatchEvent(event);\r\n }\r\n\r\n getAppointmentTypeName(appointmentType = null) {\r\n const type = appointmentType || this.getAppointmentTypeFromUrl();\r\n return this.appointmentTypes[type] || '';\r\n }\r\n\r\n getBookingMode(appointmentType = null) {\r\n const type = appointmentType || this.getAppointmentTypeFromUrl();\r\n return this.bookingModes[type] || 'hour';\r\n }\r\n\r\n getCurrentAppointmentType() {\r\n return this.getAppointmentTypeFromUrl() || sessionStorage.getItem('selectedAppointmentType') || null;\r\n }\r\n\r\n getCurrentBookingMode() {\r\n const appointmentType = this.getCurrentAppointmentType();\r\n return this.bookingModes[appointmentType] || localStorage.getItem('appointmentBookingMode') || 'hour';\r\n }\r\n\r\n \/\/ Static methods for external access\r\n static getCurrentAppointmentType() {\r\n const urlParams = new URLSearchParams(window.location.search);\r\n return urlParams.get('appointment_type') || sessionStorage.getItem('selectedAppointmentType') || null;\r\n }\r\n\r\n static getAppointmentTypeName(appointmentType) {\r\n const types = {\r\n 'grafeio-1': '\u0394\u03b9\u03b1 \u03b6\u03ce\u03c3\u03b7\u03c2 - \u03a0\u03c1\u03ce\u03c4\u03b7 \u03c3\u03c5\u03bd\u03b5\u03b4\u03c1\u03af\u03b1',\r\n 'grafeio-2': '\u0394\u03b9\u03b1 \u03b6\u03ce\u03c3\u03b7\u03c2 - \u0395\u03c0\u03b1\u03bd\u03b1\u03bb\u03b7\u03c0\u03c4\u03b9\u03ba\u03ae \u03c3\u03c5\u03bd\u03b5\u03b4\u03c1\u03af\u03b1',\r\n 'online-1': 'Online - \u03a0\u03c1\u03ce\u03c4\u03b7 \u03c3\u03c5\u03bd\u03b5\u03b4\u03c1\u03af\u03b1',\r\n 'online-2': 'Online - \u0395\u03c0\u03b1\u03bd\u03b1\u03bb\u03b7\u03c0\u03c4\u03b9\u03ba\u03ae \u03c3\u03c5\u03bd\u03b5\u03b4\u03c1\u03af\u03b1'\r\n };\r\n return types[appointmentType] || '';\r\n }\r\n\r\n static getBookingMode(appointmentType) {\r\n const modes = {\r\n 'grafeio-1': 'hour',\r\n 'grafeio-2': 'half-hour',\r\n 'online-1': 'hour',\r\n 'online-2': 'half-hour'\r\n };\r\n return modes[appointmentType] || 'hour';\r\n }\r\n\r\n \/\/ Method to programmatically set appointment type (useful for testing or integration)\r\n setAppointmentType(appointmentType) {\r\n if (this.appointmentTypes[appointmentType]) {\r\n this.selectAppointmentType(appointmentType);\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n \/\/ Method to clear appointment type selection\r\n clearAppointmentType() {\r\n \/\/ Remove URL parameter\r\n const url = new URL(window.location);\r\n url.searchParams.delete('appointment_type');\r\n window.history.replaceState({}, '', url);\r\n \r\n \/\/ Clear storage\r\n sessionStorage.removeItem('selectedAppointmentType');\r\n localStorage.removeItem('appointmentBookingMode');\r\n \r\n \/\/ Reset button highlights\r\n this.highlightActiveButton();\r\n }\r\n\r\n \/\/ Method to get all available appointment types\r\n getAvailableTypes() {\r\n return Object.keys(this.appointmentTypes).map(key => ({\r\n id: key,\r\n name: this.appointmentTypes[key],\r\n bookingMode: this.bookingModes[key]\r\n }));\r\n }\r\n}\r\n\r\n\/\/ Global functions for backward compatibility\r\nwindow.showCalendarForHourBooking = function() {\r\n \/\/ This function is called by the calendar widget itself\r\n};\r\n\r\nwindow.showCalendarForHalfHourBooking = function() {\r\n \/\/ This function is called by the calendar widget itself\r\n};\r\n\r\n\/\/ Initialize when DOM is loaded\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n window.appointmentTypeManager = new AppointmentTypeManager();\r\n \r\n \/\/ Keep backward compatibility\r\n window.appointmentTypeHandler = window.appointmentTypeManager;\r\n});\r\n\r\n\/\/ Export for use in other scripts\r\nif (typeof module !== 'undefined' && module.exports) {\r\n module.exports = AppointmentTypeManager;\r\n}\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-2ff1aa49 e-con-full e-flex e-con e-parent\" data-id=\"2ff1aa49\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3431faaf elementor-widget__width-inherit elementor-widget elementor-widget-shortcode\" data-id=\"3431faaf\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u039a\u03bb\u03b5\u03af\u03c3\u03c4\u03b5 \u03c0\u03c1\u03bf\u03c0\u03cc\u03bd\u03b7\u03c3\u03b7 *\u0393\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b5\u03af\u03c4\u03b5 \u03cc\u03bb\u03b5\u03c2 \u03c4\u03b9\u03c2 \u03bc\u03ad\u03c1\u03b5\u03c2 \u03ba\u03ac\u03bd\u03c4\u03b5 scroll \u2194 \u03c4\u03bf\u03bd \u03c0\u03af\u03bd\u03b1\u03ba\u03b1 \u03b4\u03b5\u03be\u03b9\u03ac \u03ba\u03b1\u03b9 \u03b1\u03c1\u03b9\u03c3\u03c4\u03b5\u03c1\u03ac. *\u0393\u03b9\u03b1 \u03bd\u03b1 \u03b5\u03c0\u03b9\u03bb\u03ad\u03be\u03b5\u03c4\u03b5 \u03b7\u03bc\u03ad\u03c1\u03b1 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-2918","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fekkas-gym.gr\/rantevou\/wp-json\/wp\/v2\/pages\/2918","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fekkas-gym.gr\/rantevou\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fekkas-gym.gr\/rantevou\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fekkas-gym.gr\/rantevou\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fekkas-gym.gr\/rantevou\/wp-json\/wp\/v2\/comments?post=2918"}],"version-history":[{"count":583,"href":"https:\/\/fekkas-gym.gr\/rantevou\/wp-json\/wp\/v2\/pages\/2918\/revisions"}],"predecessor-version":[{"id":4280,"href":"https:\/\/fekkas-gym.gr\/rantevou\/wp-json\/wp\/v2\/pages\/2918\/revisions\/4280"}],"wp:attachment":[{"href":"https:\/\/fekkas-gym.gr\/rantevou\/wp-json\/wp\/v2\/media?parent=2918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}