{"id":2,"date":"2024-12-17T19:10:25","date_gmt":"2024-12-17T19:10:25","guid":{"rendered":"https:\/\/chatapp.ibl82.nl\/?page_id=2"},"modified":"2025-01-31T22:52:26","modified_gmt":"2025-01-31T22:52:26","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/chatapp.ibl82.nl\/?page_id=2","title":{"rendered":"Chat page"},"content":{"rendered":"\r\n        <script type=\"module\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/emoji-picker-element@^1\/index.js\"><\/script>\r\n\r\n        <div id=\"chat-window\" class=\"chat-container\" data-chat-id=\"\">\r\n            <div id=\"chat-timer\" class=\"chat-timer\">Resterende tijd: <span id=\"chat-timer-display\">00:00<\/span><\/div>\r\n            <div id=\"chat-header\" class=\"chat-header\">\r\n                <h3>Chat<\/h3>\r\n            <\/div>\r\n            <div id=\"chat-messages\" class=\"chat-messages\"><\/div>\r\n            <div class=\"chat-input-container\">\r\n                <button id=\"emoji-picker-toggle\" class=\"emoji-picker-toggle\">\ud83d\ude00<\/button>\r\n                <emoji-picker id=\"emoji-picker\" style=\"display:none;\"><\/emoji-picker>\r\n                <textarea id=\"chat-input\" class=\"chat-input\" placeholder=\"Typ een bericht...\" ><\/textarea>\r\n                <button id=\"send-chat-button\" class=\"chat-send-button\" >\r\n                    <i class=\"chat-send-icon\">\u27a4<\/i>\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n\r\n        \n\n\n    \r\n        <style>\r\n            .chat-schedule-container {\r\n                max-width: 400px;\r\n                margin: 20px auto;\r\n                padding: 20px;\r\n                background: #f8f9fa;\r\n                border-radius: 8px;\r\n                box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\r\n            }\r\n            .chat-schedule-container label {\r\n                font-weight: bold;\r\n                margin-bottom: 5px;\r\n                display: block;\r\n            }\r\n            .chat-schedule-container input {\r\n                width: 100%;\r\n                padding: 8px;\r\n                margin-bottom: 10px;\r\n                border: 1px solid #ccc;\r\n                border-radius: 5px;\r\n            }\r\n            .chat-schedule-container button {\r\n                width: 100%;\r\n                padding: 10px;\r\n                margin-top: 5px;\r\n                border: none;\r\n                background: #007bff;\r\n                color: white;\r\n                border-radius: 5px;\r\n                cursor: pointer;\r\n            }\r\n            .chat-schedule-container button:hover {\r\n                background: #0056b3;\r\n            }\r\n            .schedule-now {\r\n                background: #28a745 !important;\r\n            }\r\n            .schedule-now:hover {\r\n                background: #218838 !important;\r\n            }\r\n        <\/style>\r\n    \r\n        <div class=\"chat-schedule-container\">\r\n            <form id=\"chat-schedule-form\" class=\"chat-schedule-form\">\r\n                <label for=\"schedule-time\">Selecteer een tijd voor je chat:<\/label>\r\n                <input type=\"datetime-local\" id=\"schedule-time\" name=\"schedule_time\" required min=\"\">\r\n                <button type=\"submit\">Afspraak maken<\/button>\r\n                <button type=\"button\" id=\"schedule-now\" class=\"schedule-now\">Chat nu!<\/button>\r\n            <\/form>\r\n        <\/div>\r\n    \r\n        <script>\r\n            (function($) {\r\n                $(document).ready(function () {\r\n                    const scheduleInput = $('#schedule-time');\r\n                    const nowButton = $('#schedule-now');\r\n                    const scheduleForm = $('#chat-schedule-form');\r\n    \r\n                    \/\/ Set minimum date\/time to prevent past scheduling\r\n                    function updateMinDateTime() {\r\n                        const now = new Date();\r\n                        const localNow = now.toISOString().slice(0, 16);\r\n                        scheduleInput.attr('min', localNow);\r\n                    }\r\n    \r\n                    updateMinDateTime(); \/\/ Set min time on page load\r\n    \r\n                    \/\/ Function to check if the user is logged in\r\n                    function isUserLoggedIn() {\r\n                        return wpChatAjax.is_logged_in === \"1\"; \/\/ Ensure this is set in your wp_localize_script\r\n                    }\r\n    \r\n                    \/\/ Handle \"Schedule Now\" button click\r\n                    nowButton.on('click', function () {\r\n                        if (!isUserLoggedIn()) {\r\n                            window.location.href = wpChatAjax.login_url; \/\/ Redirect to login page if not logged in\r\n                            return;\r\n                        }\r\n    \r\n                        const now = new Date();\r\n                        const localNow = now.toISOString().slice(0, 16);\r\n                        scheduleInput.val(localNow);\r\n    \r\n                        \/\/ Automatically submit the form\r\n                        scheduleForm.submit();\r\n                    });\r\n    \r\n                    \/\/ Handle form submission\r\n                    scheduleForm.on('submit', function(e) {\r\n                        e.preventDefault();\r\n    \r\n                        if (!isUserLoggedIn()) {\r\n                            window.location.href = wpChatAjax.login_url;\r\n                            return;\r\n                        }\r\n    \r\n                        const scheduleTime = scheduleInput.val();\r\n                        if (!scheduleTime) return alert(\"Selecteer een geldige datum en tijd!\");\r\n    \r\n                        $.ajax({\r\n                            url: wpChatAjax.ajax_url,\r\n                            type: 'POST',\r\n                            data: {\r\n                                action: 'schedule_chat',\r\n                                security: wpChatAjax.nonce,\r\n                                schedule_time: scheduleTime\r\n                            },\r\n                            success: function(response) {\r\n                                if (response.success) {\r\n                                    alert('Je chat is geboekt');\r\n                                    scheduleInput.val(''); \/\/ Clear input after scheduling\r\n                                } else {\r\n                                    alert('Het is niet gelukt om je chat te boeken: ' + response.data.message);\r\n                                }\r\n                            }\r\n                        });\r\n                    });\r\n                });\r\n            })(jQuery);\r\n        <\/script>\r\n    \r\n        \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/chatapp.ibl82.nl\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chatapp.ibl82.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chatapp.ibl82.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chatapp.ibl82.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chatapp.ibl82.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":6,"href":"https:\/\/chatapp.ibl82.nl\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/chatapp.ibl82.nl\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/chatapp.ibl82.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}