{"id":84,"date":"2026-03-20T05:40:50","date_gmt":"2026-03-20T05:40:50","guid":{"rendered":"https:\/\/websketch.co.uk\/doctor\/?page_id=84"},"modified":"2026-03-20T05:40:52","modified_gmt":"2026-03-20T05:40:52","slug":"book-an-appointment","status":"publish","type":"page","link":"https:\/\/websketch.co.uk\/doctor\/book-an-appointment\/","title":{"rendered":"Book an Appointment"},"content":{"rendered":"        <form id=\"ca-booking-form\" clas=\"form-control\" method=\"POST\">\r\n            <h3><center>Book an Appointment<\/center><\/h3>\r\n            \r\n            <label>Doctor:<\/label>\r\n            <select id=\"ca_doctor_select\" name=\"ca_doctor_id\" required>\r\n                <option value=\"\">Select a Doctor<\/option>\r\n                                    <option value=\"83\">Dr. Showmen<\/option>\r\n                                    <option value=\"81\">Dr. Abdullah<\/option>\r\n                            <\/select>\r\n\r\n            <label>Date:<\/label>\r\n            <input type=\"date\" id=\"ca_date_select\" name=\"ca_date_only\" min=\"2026-06-01\" required>\r\n\r\n            <div id=\"ca_slots_container\" style=\"margin-top:20px; display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;\">\r\n                <p>Please select a date to see available slots.<\/p>\r\n            <\/div>\r\n\r\n            <div id=\"patient_details\" style=\"display:none; margin-top:20px;\">\r\n                <label>Name:<\/label>\r\n                <input type=\"text\" name=\"ca_patient_name\" placeholder=\"Your Name\" required>\r\n                <label>Email:<\/label>\r\n                <input type=\"email\" name=\"ca_patient_email\" placeholder=\"Your Email\" required>\r\n                <input type=\"hidden\" id=\"selected_slot\" name=\"ca_time\">\r\n                <input type=\"submit\" name=\"ca_submit_booking\" value=\"Confirm Booking\">\r\n            <\/div>\r\n        <\/form>\r\n\r\n        <script>\r\n        document.getElementById('ca_date_select').addEventListener('change', function() {\r\n            let doctorId = document.getElementById('ca_doctor_select').value;\r\n            let date = this.value;\r\n\r\n            \/\/ In a real app, we'd use wp_ajax, but for 'quick build' let's fetch slots\r\n            fetch(`https:\/\/websketch.co.uk\/doctor\/wp-admin\/admin-ajax.php?action=get_slots&doctor_id=${doctorId}&date=${date}`)\r\n                .then(res => res.json())\r\n                .then(data => {\r\n                    let container = document.getElementById('ca_slots_container');\r\n                    container.innerHTML = '';\r\n                    data.forEach(slot => {\r\n                        let btn = document.createElement('button');\r\n                        btn.type = 'button';\r\n                        \r\n                        \/\/ Use a CSS class for easier styling\r\n                        btn.className = 'slot-btn';\r\n                        btn.innerText = slot.start;\r\n\r\n                        \/\/ slot.booked comes from our PHP JSON response\r\n                        if (slot.booked === true || slot.booked === 1) {\r\n                            btn.disabled = true;\r\n                            btn.style.backgroundColor = '#cccccc'; \/\/ Gray\r\n                            btn.style.color = '#666666';\r\n                            btn.style.cursor = 'not-allowed';\r\n                            btn.innerText += ' (Full)';\r\n                        } else {\r\n                            btn.style.backgroundColor = '#2271b1'; \/\/ Blue\r\n                            btn.style.color = '#ffffff';\r\n                            btn.style.cursor = 'pointer';\r\n                            \r\n                            \/\/ btn.onclick = function() {\r\n                            \/\/     \/\/ Remove highlight from others\r\n                            \/\/     document.querySelectorAll('.slot-btn').forEach(b => b.style.outline = 'none');\r\n                            \/\/     \/\/ Highlight this one\r\n                            \/\/     this.style.outline = '3px solid #000';\r\n                                \r\n                            \/\/     document.getElementById('selected_slot').value = slot.start;\r\n                            \/\/     document.getElementById('patient_details').style.display = 'block';\r\n                            \/\/ };\r\n                            btn.onclick = function() {\r\n                                \/\/ Remove 'selected' class from all\r\n                                document.querySelectorAll('.slot-btn').forEach(b => b.classList.remove('selected'));\r\n                                \/\/ Add to this one\r\n                                this.classList.add('selected');\r\n                                \r\n                                document.getElementById('selected_slot').value = slot.start;\r\n                                document.getElementById('patient_details').style.display = 'block';\r\n                            };\r\n                        }\r\n                        container.appendChild(btn);\r\n                    });\r\n                });\r\n        });\r\n        <\/script>\r\n            <style>\r\n                #ca_slots_container {\r\n                    display: grid;\r\n                    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\r\n                    gap: 15px;\r\n                    margin: 20px 0;\r\n                }\r\n                .slot-btn {\r\n                    padding: 12px;\r\n                    border: 2px solid #2271b1;\r\n                    background: #fff;\r\n                    color: #2271b1;\r\n                    font-weight: bold;\r\n                    border-radius: 6px;\r\n                    transition: all 0.2s;\r\n                }\r\n                .slot-btn:hover:not(:disabled) {\r\n                    background: #2271b1;\r\n                    color: #fff;\r\n                }\r\n                .slot-btn.selected {\r\n                    background: #10395a !important;\r\n                    color: #fff !important;\r\n                    border-color: #10395a;\r\n                }\r\n                .slot-btn:disabled {\r\n                    background: #eee;\r\n                    border-color: #ccc;\r\n                    color: #999;\r\n                    cursor: not-allowed;\r\n                    text-decoration: line-through;\r\n                }\r\n                #ca-booking-form{\r\n                    max-width: 500px;\r\n                    margin: 30px auto;\r\n                    padding: 20px;\r\n                    border: 1px solid #ddd;\r\n                    border-radius: 8px;\r\n                    background: #f9f9f9;\r\n                }\r\n                #ca-booking-form input, select {\r\n                    width: 100%;\r\n                    padding: 10px;\r\n                    margin-bottom: 15px;\r\n                    border: 1px solid #ccc;\r\n                    border-radius: 4px;\r\n                }\r\n            <\/style>\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":"closed","template":"","meta":{"footnotes":""},"class_list":["post-84","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/websketch.co.uk\/doctor\/wp-json\/wp\/v2\/pages\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websketch.co.uk\/doctor\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/websketch.co.uk\/doctor\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/websketch.co.uk\/doctor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websketch.co.uk\/doctor\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":1,"href":"https:\/\/websketch.co.uk\/doctor\/wp-json\/wp\/v2\/pages\/84\/revisions"}],"predecessor-version":[{"id":85,"href":"https:\/\/websketch.co.uk\/doctor\/wp-json\/wp\/v2\/pages\/84\/revisions\/85"}],"wp:attachment":[{"href":"https:\/\/websketch.co.uk\/doctor\/wp-json\/wp\/v2\/media?parent=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}