{"id":36913,"date":"2025-11-20T21:45:24","date_gmt":"2025-11-20T18:45:24","guid":{"rendered":"https:\/\/atsea.group\/?page_id=36913"},"modified":"2025-11-20T21:47:16","modified_gmt":"2025-11-20T18:47:16","slug":"cons","status":"publish","type":"page","link":"https:\/\/atsea.group\/uk\/cons\/","title":{"rendered":"Consultation"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"36913\" class=\"elementor elementor-36913\" data-elementor-settings=\"[]\">\n\t\t\t\t\t\t<div class=\"elementor-inner\">\n\t\t\t\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3f1e069 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3f1e069\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3f9317b\" data-id=\"3f9317b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-621900c elementor-widget elementor-widget-shortcode\" data-id=\"621900c\" 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<div class=\"elementor-shortcode\">        <div class=\"consult-calendar-wrapper\">\r\n            <div class=\"calendar-header\">\r\n                <h2>\u0420\u0430\u0441\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0438\u0439<\/h2>\r\n                <div class=\"calendar-nav\">\r\n                    <button class=\"nav-btn prev-month\">\u2039<\/button>\r\n                    <span class=\"current-month\"><\/span>\r\n                    <button class=\"nav-btn next-month\">\u203a<\/button>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"calendar-container\">\r\n                <div class=\"calendar-grid\" id=\"consult-calendar\">\r\n                    <div class=\"calendar-loading\">\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0440\u0430\u0441\u043f\u0438\u0441\u0430\u043d\u0438\u044f...<\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div id=\"consult-modal\" class=\"consult-modal\" style=\"display: none;\">\r\n                <div class=\"modal-overlay\"><\/div>\r\n                <div class=\"modal-content\">\r\n                    <button class=\"modal-close\">\u00d7<\/button>\r\n                    <div class=\"modal-body\">\r\n                        <div class=\"consult-image\"><\/div>\r\n                        <div class=\"consult-details\">\r\n                            <h3 class=\"consult-title\"><\/h3>\r\n                            <div class=\"details-table\">\r\n                                <div class=\"table-row\">\r\n                                    <div class=\"table-cell label\">\u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c:<\/div>\r\n                                    <div class=\"table-cell value consult-price\"><\/div>\r\n                                <\/div>\r\n                                <div class=\"table-row\">\r\n                                    <div class=\"table-cell label\">\u0414\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c:<\/div>\r\n                                    <div class=\"table-cell value consult-duration\"><\/div>\r\n                                <\/div>\r\n                                <div class=\"table-row\">\r\n                                    <div class=\"table-cell label\">\u0412\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u0434\u0430\u0442\u0430:<\/div>\r\n                                    <div class=\"table-cell value selected-date\"><\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div class=\"consult-description\"><\/div>\r\n                            <div class=\"time-slots\">\r\n                                <h4>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0440\u0435\u043c\u044f:<\/h4>\r\n                                <div class=\"slots-grid\" id=\"time-slots\"><\/div>\r\n                            <\/div>\r\n                            <div class=\"consult-actions\">\r\n                                <button class=\"btn-book-consult\" disabled>\u041f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043e\u043f\u043b\u0430\u0442\u0435<\/button>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <style>\r\n        .consult-calendar-wrapper {\r\n            background: white;\r\n            border-radius: 12px;\r\n            box-shadow: 0 4px 20px rgba(0,0,0,0.1);\r\n            overflow: hidden;\r\n            margin: 20px 0;\r\n            max-width: 100%;\r\n        }\r\n        \r\n        .calendar-header {\r\n            background: #f7ee00 !important;\r\n            color: #000 !important;\r\n            padding: 20px;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            flex-wrap: wrap;\r\n            gap: 15px;\r\n        }\r\n        \r\n        .calendar-header h2 {\r\n            margin: 0;\r\n            font-size: 22px;\r\n            font-weight: 600;\r\n            color: #000 !important;\r\n        }\r\n        \r\n        .calendar-nav {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            color: #000 !important;\r\n        }\r\n        \r\n        .nav-btn {\r\n            background: #000 !important;\r\n            border: none;\r\n            color: #fff !important;\r\n            width: 36px;\r\n            height: 36px;\r\n            border-radius: 50%;\r\n            font-size: 16px;\r\n            cursor: pointer;\r\n            transition: background 0.3s ease;\r\n        }\r\n        \r\n        .nav-btn:hover {\r\n            background: #333 !important;\r\n        }\r\n        \r\n        .current-month {\r\n            font-size: 16px;\r\n            font-weight: 600;\r\n            min-width: 160px;\r\n            text-align: center;\r\n            color: #000 !important;\r\n        }\r\n        \r\n        .calendar-container {\r\n            padding: 15px;\r\n            overflow-x: auto;\r\n        }\r\n        \r\n        .calendar-days-header {\r\n            display: grid;\r\n            grid-template-columns: repeat(7, 1fr);\r\n            gap: 1px;\r\n            margin-bottom: 8px;\r\n        }\r\n        \r\n        .day-header {\r\n            background: #f8f9fa;\r\n            padding: 12px 8px;\r\n            text-align: center;\r\n            font-weight: 600;\r\n            color: #495057;\r\n            border-radius: 4px;\r\n            font-size: 14px;\r\n        }\r\n        \r\n        .calendar-days {\r\n            display: grid;\r\n            grid-template-columns: repeat(7, 1fr);\r\n            gap: 6px;\r\n        }\r\n        \r\n        .calendar-day {\r\n            background: white;\r\n            border: 2px solid #e9ecef;\r\n            border-radius: 6px;\r\n            padding: 10px 6px;\r\n            min-height: 70px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            position: relative;\r\n        }\r\n        \r\n        .calendar-day.past-date {\r\n            background: #f8f9fa;\r\n            color: #adb5bd;\r\n            cursor: not-allowed;\r\n        }\r\n        \r\n        .calendar-day.past-date:hover {\r\n            border-color: #e9ecef;\r\n            transform: none;\r\n            box-shadow: none;\r\n        }\r\n        \r\n        .calendar-day.today {\r\n            border-color: #ffc107;\r\n            background: #fff3cd;\r\n        }\r\n        \r\n        .calendar-day.has-slots {\r\n            border-color: #28a745;\r\n            background: #f8fff9;\r\n        }\r\n        \r\n        .day-number {\r\n            font-weight: bold;\r\n            font-size: 14px;\r\n            margin-bottom: 4px;\r\n            color: #495057;\r\n        }\r\n        \r\n        .day-price {\r\n            font-weight: 600;\r\n            color: #e74c3c;\r\n            font-size: 12px;\r\n        }\r\n        \r\n        .consult-modal {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            z-index: 10000;\r\n        }\r\n        \r\n        .modal-overlay {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: rgba(0,0,0,0.7);\r\n        }\r\n        \r\n        .modal-content {\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            background: white;\r\n            border-radius: 12px;\r\n            width: 95%;\r\n            max-width: 500px;\r\n            max-height: 90vh;\r\n            overflow-y: auto;\r\n        }\r\n        \r\n        .modal-close {\r\n            position: absolute;\r\n            top: 10px;\r\n            right: 10px;\r\n            background: none;\r\n            border: none;\r\n            font-size: 20px;\r\n            cursor: pointer;\r\n            color: #6c757d;\r\n            z-index: 1;\r\n            width: 30px;\r\n            height: 30px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n        \r\n        .modal-close:hover {\r\n            color: #e74c3c;\r\n        }\r\n        \r\n        .modal-body {\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n        \r\n        .consult-image {\r\n            height: 150px;\r\n            background: #f8f9fa;\r\n            border-radius: 12px 12px 0 0;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .consult-image img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n        }\r\n        \r\n        .consult-details {\r\n            padding: 20px;\r\n        }\r\n        \r\n        .consult-title {\r\n            margin: 0 0 15px 0;\r\n            color: #2c3e50;\r\n            font-size: 20px;\r\n            text-align: center;\r\n        }\r\n        \r\n        .details-table {\r\n            width: 100%;\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n        .table-row {\r\n            display: flex;\r\n            align-items: center;\r\n            border-bottom: 1px solid #e9ecef;\r\n            padding: 12px 0;\r\n            min-height: 48px;\r\n        }\r\n        \r\n        .table-row:last-child {\r\n            border-bottom: none;\r\n        }\r\n        \r\n        .table-cell {\r\n            display: flex;\r\n            align-items: center;\r\n        }\r\n        \r\n        .table-cell.label {\r\n            font-weight: 600;\r\n            color: #495057;\r\n            width: 140px;\r\n            flex-shrink: 0;\r\n        }\r\n        \r\n        .table-cell.value {\r\n            color: #2c3e50;\r\n            font-weight: 500;\r\n            flex: 1;\r\n        }\r\n        \r\n        .consult-price {\r\n            color: #e74c3c;\r\n            font-weight: 700;\r\n        }\r\n        \r\n        .selected-date {\r\n            color: #667eea;\r\n            font-weight: 600;\r\n        }\r\n        \r\n        .consult-description {\r\n            color: #6c757d;\r\n            line-height: 1.5;\r\n            margin-bottom: 20px;\r\n            font-size: 14px;\r\n            padding: 10px 0;\r\n        }\r\n        \r\n        .time-slots h4 {\r\n            margin: 0 0 12px 0;\r\n            color: #2c3e50;\r\n            font-size: 16px;\r\n        }\r\n        \r\n        .slots-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));\r\n            gap: 8px;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .time-slot {\r\n            background: white;\r\n            border: 2px solid #e9ecef;\r\n            border-radius: 6px;\r\n            padding: 10px 6px;\r\n            text-align: center;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n        }\r\n        \r\n        .time-slot:hover {\r\n            border-color: #667eea;\r\n            background: #f8f9ff;\r\n        }\r\n        \r\n        .time-slot.selected {\r\n            background: #667eea;\r\n            color: white;\r\n            border-color: #667eea;\r\n        }\r\n        \r\n        .time-slot.booked {\r\n            background: #f8f9fa;\r\n            color: #adb5bd;\r\n            cursor: not-allowed;\r\n            text-decoration: line-through;\r\n        }\r\n        \r\n        .time-slot.past-time {\r\n            background: #f8f9fa;\r\n            color: #adb5bd;\r\n            cursor: not-allowed;\r\n            text-decoration: line-through;\r\n        }\r\n        \r\n        .btn-book-consult {\r\n            background: #bdc3c7;\r\n            color: white;\r\n            border: none;\r\n            padding: 12px 20px;\r\n            border-radius: 6px;\r\n            font-size: 15px;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            width: 100%;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .btn-book-consult:enabled {\r\n            background: linear-gradient(135deg, #27ae60, #229954);\r\n        }\r\n        \r\n        .btn-book-consult:enabled:hover {\r\n            transform: translateY(-1px);\r\n            box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);\r\n        }\r\n        \r\n        .btn-book-consult:disabled {\r\n            background: #bdc3c7;\r\n            cursor: not-allowed;\r\n        }\r\n        \r\n        .calendar-loading {\r\n            text-align: center;\r\n            padding: 30px;\r\n            color: #6c757d;\r\n            font-size: 15px;\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .calendar-header {\r\n                padding: 15px;\r\n                flex-direction: column;\r\n                text-align: center;\r\n                gap: 10px;\r\n            }\r\n            \r\n            .calendar-header h2 {\r\n                font-size: 18px;\r\n            }\r\n            \r\n            .calendar-container {\r\n                padding: 10px;\r\n            }\r\n            \r\n            .calendar-days-header,\r\n            .calendar-days {\r\n                min-width: 400px;\r\n            }\r\n            \r\n            .day-header {\r\n                padding: 8px 4px;\r\n                font-size: 12px;\r\n            }\r\n            \r\n            .calendar-day {\r\n                min-height: 60px;\r\n                padding: 6px 4px;\r\n            }\r\n            \r\n            .day-number {\r\n                font-size: 12px;\r\n            }\r\n            \r\n            .day-price {\r\n                font-size: 10px;\r\n            }\r\n            \r\n            .modal-content {\r\n                width: 98%;\r\n                margin: 10px auto;\r\n            }\r\n            \r\n            .consult-details {\r\n                padding: 15px;\r\n            }\r\n            \r\n            .consult-title {\r\n                font-size: 18px;\r\n            }\r\n            \r\n            .table-cell.label {\r\n                width: 120px;\r\n                font-size: 14px;\r\n            }\r\n            \r\n            .table-row {\r\n                padding: 10px 0;\r\n                min-height: 44px;\r\n            }\r\n            \r\n            .slots-grid {\r\n                grid-template-columns: repeat(4, 1fr);\r\n                gap: 6px;\r\n            }\r\n            \r\n            .time-slot {\r\n                padding: 8px 4px;\r\n                font-size: 12px;\r\n            }\r\n        }\r\n        \r\n        @media (max-width: 480px) {\r\n            .calendar-days-header,\r\n            .calendar-days {\r\n                min-width: 350px;\r\n            }\r\n            \r\n            .day-header {\r\n                padding: 6px 3px;\r\n                font-size: 11px;\r\n            }\r\n            \r\n            .calendar-day {\r\n                min-height: 50px;\r\n                padding: 4px 2px;\r\n            }\r\n            \r\n            .slots-grid {\r\n                grid-template-columns: repeat(3, 1fr);\r\n            }\r\n            \r\n            .table-row {\r\n                flex-direction: column;\r\n                align-items: flex-start;\r\n                gap: 4px;\r\n                padding: 8px 0;\r\n                min-height: auto;\r\n            }\r\n            \r\n            .table-cell.label {\r\n                width: auto;\r\n            }\r\n        }\r\n        <\/style>\r\n\r\n        <script>\r\n        jQuery(document).ready(function($) {\r\n            let currentDate = new Date();\r\n            let currentConsult = null;\r\n            let selectedDate = null;\r\n            let selectedTime = null;\r\n            \r\n            function loadCalendar() {\r\n                $('#consult-calendar').html('<div class=\"calendar-loading\">\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0440\u0430\u0441\u043f\u0438\u0441\u0430\u043d\u0438\u044f...<\/div>');\r\n                \r\n                $.get(consult_ajax.url, {\r\n                    action: 'get_consults',\r\n                    month: currentDate.getMonth() + 1,\r\n                    year: currentDate.getFullYear()\r\n                }, function(response) {\r\n                    if (response.success) {\r\n                        renderCalendar(response.data);\r\n                    }\r\n                });\r\n            }\r\n            \r\n            function renderCalendar(data) {\r\n                const monthNames = [\r\n                    '\u042f\u043d\u0432\u0430\u0440\u044c', '\u0424\u0435\u0432\u0440\u0430\u043b\u044c', '\u041c\u0430\u0440\u0442', '\u0410\u043f\u0440\u0435\u043b\u044c', '\u041c\u0430\u0439', '\u0418\u044e\u043d\u044c',\r\n                    '\u0418\u044e\u043b\u044c', '\u0410\u0432\u0433\u0443\u0441\u0442', '\u0421\u0435\u043d\u0442\u044f\u0431\u0440\u044c', '\u041e\u043a\u0442\u044f\u0431\u0440\u044c', '\u041d\u043e\u044f\u0431\u0440\u044c', '\u0414\u0435\u043a\u0430\u0431\u0440\u044c'\r\n                ];\r\n                \r\n                $('.current-month').text(monthNames[currentDate.getMonth()] + ' ' + currentDate.getFullYear());\r\n                \r\n                let calendarHtml = '<div class=\"calendar-days-header\">';\r\n                ['\u041f\u043d', '\u0412\u0442', '\u0421\u0440', '\u0427\u0442', '\u041f\u0442', '\u0421\u0431', '\u0412\u0441'].forEach(day => {\r\n                    calendarHtml += `<div class=\"day-header\">${day}<\/div>`;\r\n                });\r\n                calendarHtml += '<\/div><div class=\"calendar-days\">';\r\n                \r\n                const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);\r\n                const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);\r\n                const today = new Date();\r\n                today.setHours(0,0,0,0);\r\n                \r\n                \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0434\u0435\u043d\u044c \u043d\u0435\u0434\u0435\u043b\u0438 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0434\u043d\u044f \u043c\u0435\u0441\u044f\u0446\u0430 (0 = \u0432\u043e\u0441\u043a\u0440\u0435\u0441\u0435\u043d\u044c\u0435, 1 = \u043f\u043e\u043d\u0435\u0434\u0435\u043b\u044c\u043d\u0438\u043a, ...)\r\n                let firstDayOfWeek = firstDay.getDay();\r\n                \/\/ \u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c: \u0432\u043e\u0441\u043a\u0440\u0435\u0441\u0435\u043d\u044c\u0435 (0) \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f 7, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u0435\u0434\u0435\u043b\u044c\u043d\u0438\u043a \u0431\u044b\u043b \u043f\u0435\u0440\u0432\u044b\u043c\r\n                firstDayOfWeek = firstDayOfWeek === 0 ? 7 : firstDayOfWeek;\r\n                \r\n                \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0443\u0441\u0442\u044b\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 \u0434\u043b\u044f \u0434\u043d\u0435\u0439 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043c\u0435\u0441\u044f\u0446\u0430\r\n                for (let i = 1; i < firstDayOfWeek; i++) {\r\n                    calendarHtml += '<div class=\"calendar-day other-month\"><\/div>';\r\n                }\r\n                \r\n                \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u043d\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043c\u0435\u0441\u044f\u0446\u0430\r\n                const totalDays = lastDay.getDate();\r\n                \r\n                for (let day = 1; day <= totalDays; day++) {\r\n                    const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);\r\n                    \r\n                    const year = date.getFullYear();\r\n                    const month = String(date.getMonth() + 1).padStart(2, '0');\r\n                    const dayFormatted = String(date.getDate()).padStart(2, '0');\r\n                    const dateStr = `${year}-${month}-${dayFormatted}`;\r\n                    \r\n                    const dayData = data.dates[dateStr] || [];\r\n                    const isPastDate = date < today;\r\n                    \r\n                    let dayClass = 'calendar-day';\r\n                    if (isPastDate) {\r\n                        dayClass += ' past-date';\r\n                    }\r\n                    if (date.toDateString() === today.toDateString()) {\r\n                        dayClass += ' today';\r\n                    }\r\n                    if (dayData.length > 0 && !isPastDate) {\r\n                        dayClass += ' has-slots';\r\n                    }\r\n                    \r\n                    calendarHtml += `<div class=\"${dayClass}\" data-date=\"${dateStr}\">`;\r\n                    calendarHtml += `<div class=\"day-number\">${date.getDate()}<\/div>`;\r\n                    \r\n                    if (dayData.length > 0 && !isPastDate) {\r\n                        const consult = dayData[0];\r\n                        calendarHtml += `<div class=\"day-price\">${consult.price} \u20ac<\/div>`;\r\n                    }\r\n                    \r\n                    calendarHtml += '<\/div>';\r\n                }\r\n                \r\n                \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0443\u0441\u0442\u044b\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 \u0434\u043b\u044f \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u0442\u043a\u0438\r\n                const totalCells = Math.ceil((firstDayOfWeek - 1 + totalDays) \/ 7) * 7;\r\n                const remainingCells = totalCells - (firstDayOfWeek - 1 + totalDays);\r\n                for (let i = 0; i < remainingCells; i++) {\r\n                    calendarHtml += '<div class=\"calendar-day other-month\"><\/div>';\r\n                }\r\n                \r\n                calendarHtml += '<\/div>';\r\n                $('#consult-calendar').html(calendarHtml);\r\n                \r\n                $('.calendar-day.has-slots').click(function() {\r\n                    const dateStr = $(this).data('date');\r\n                    const dateParts = dateStr.split('-');\r\n                    const dateObj = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);\r\n                    const consult = data.dates[dateStr][0];\r\n                    \r\n                    openConsultModal(consult, dateStr, dateObj);\r\n                });\r\n            }\r\n            \r\n            function openConsultModal(consult, dateStr, dateObj) {\r\n                currentConsult = consult;\r\n                selectedDate = dateStr;\r\n                selectedTime = null;\r\n                \r\n                const options = { day: 'numeric', month: 'long', year: 'numeric' };\r\n                const dateFormatted = dateObj.toLocaleDateString('en-US', options);\r\n                \r\n                $('.consult-title').text(consult.title);\r\n                $('.consult-price').text(consult.price + ' \u20ac');\r\n                $('.consult-duration').text(consult.duration + ' \u043c\u0438\u043d.');\r\n                $('.selected-date').text(dateFormatted);\r\n                $('.consult-description').html(consult.description);\r\n                \r\n                if (consult.image) {\r\n                    $('.consult-image').html(`<img decoding=\"async\" src=\"${consult.image}\" alt=\"${consult.title}\">`);\r\n                } else {\r\n                    $('.consult-image').html('<div style=\"display:flex;align-items:center;justify-content:center;height:100%;color:#6c757d;\">No image available<\/div>');\r\n                }\r\n                \r\n                let slotsHtml = '';\r\n                const now = new Date();\r\n                const today = new Date();\r\n                today.setHours(0,0,0,0);\r\n                const isToday = dateObj.getTime() === today.getTime();\r\n                \r\n                consult.available_times.forEach(time => {\r\n                    const isBooked = consult.booked_times && consult.booked_times.includes(time);\r\n                    \r\n                    let isPastTime = false;\r\n                    if (isToday) {\r\n                        const [hours, minutes] = time.split(':');\r\n                        const slotDateTime = new Date(dateObj);\r\n                        slotDateTime.setHours(parseInt(hours), parseInt(minutes), 0, 0);\r\n                        \r\n                        const siteNow = new Date();\r\n                        if (consult_ajax.timezone) {\r\n                            const siteTimeString = siteNow.toLocaleString('en-US', { timeZone: consult_ajax.timezone });\r\n                            siteNow.setTime(new Date(siteTimeString).getTime());\r\n                        }\r\n                        \r\n                        if (slotDateTime < siteNow) {\r\n                            isPastTime = true;\r\n                        }\r\n                    }\r\n                    \r\n                    const slotClass = isBooked ? 'time-slot booked' : (isPastTime ? 'time-slot past-time' : 'time-slot');\r\n                    slotsHtml += `<div class=\"${slotClass}\" data-time=\"${time}\">${time}<\/div>`;\r\n                });\r\n                $('#time-slots').html(slotsHtml);\r\n                \r\n                $('.btn-book-consult').prop('disabled', true);\r\n                $('#consult-modal').show();\r\n                \r\n                $('.time-slot:not(.booked):not(.past-time)').click(function() {\r\n                    $('.time-slot').removeClass('selected');\r\n                    $(this).addClass('selected');\r\n                    selectedTime = $(this).data('time');\r\n                    $('.btn-book-consult').prop('disabled', false);\r\n                });\r\n            }\r\n            \r\n            $('.btn-book-consult').click(function() {\r\n                if (!selectedTime || !currentConsult) return;\r\n                \r\n                $.post(consult_ajax.url, {\r\n                    action: 'book_consult',\r\n                    consult_id: currentConsult.id,\r\n                    date: selectedDate,\r\n                    time: selectedTime,\r\n                    nonce: consult_ajax.nonce\r\n                }, function(response) {\r\n                    if (response.success) {\r\n                        window.location.href = response.data.checkout_url;\r\n                    } else {\r\n                        alert('\u041e\u0448\u0438\u0431\u043a\u0430 \u0431\u0440\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f: ' + response.data.message);\r\n                    }\r\n                });\r\n            });\r\n            \r\n            $('.modal-close, .modal-overlay').click(function() {\r\n                $('#consult-modal').hide();\r\n            });\r\n            \r\n            $('.prev-month').click(function() {\r\n                currentDate.setMonth(currentDate.getMonth() - 1);\r\n                loadCalendar();\r\n            });\r\n            \r\n            $('.next-month').click(function() {\r\n                currentDate.setMonth(currentDate.getMonth() + 1);\r\n                loadCalendar();\r\n            });\r\n            \r\n            loadCalendar();\r\n        });\r\n        <\/script>\r\n        <\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":2851,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-36913","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/atsea.group\/uk\/wp-json\/wp\/v2\/pages\/36913","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atsea.group\/uk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/atsea.group\/uk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/atsea.group\/uk\/wp-json\/wp\/v2\/users\/2851"}],"replies":[{"embeddable":true,"href":"https:\/\/atsea.group\/uk\/wp-json\/wp\/v2\/comments?post=36913"}],"version-history":[{"count":4,"href":"https:\/\/atsea.group\/uk\/wp-json\/wp\/v2\/pages\/36913\/revisions"}],"predecessor-version":[{"id":36918,"href":"https:\/\/atsea.group\/uk\/wp-json\/wp\/v2\/pages\/36913\/revisions\/36918"}],"wp:attachment":[{"href":"https:\/\/atsea.group\/uk\/wp-json\/wp\/v2\/media?parent=36913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}