{"id":7,"date":"2026-03-11T21:41:09","date_gmt":"2026-03-11T21:41:09","guid":{"rendered":"https:\/\/sospuravida.com\/SPA\/?page_id=7"},"modified":"2026-03-12T04:47:41","modified_gmt":"2026-03-12T04:47:41","slug":"agendar","status":"publish","type":"page","link":"https:\/\/sospuravida.com\/SPA\/agendar\/","title":{"rendered":"AGENDAR"},"content":{"rendered":"<section  class='av_textblock_section av-av_textblock-79c819409ca96efc718cf12859ce1a11 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/CreativeWork\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: center;\">        <div class=\"spa-booking-widget\" id=\"spa-booking-app\">\n            <style>\n                .spa-booking-widget { font-family: 'Inter', sans-serif; max-width: 450px; margin: 20px auto; background: #fff; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); overflow: hidden; border: 1px solid #eee; }\n                .spa-booking-header { background: #0f172a; color: #fff; padding: 30px 20px; text-align: center; }\n                .spa-booking-header h2 { color: #fff !important; margin: 0; font-weight: 900; }\n                .spa-step { padding: 30px; display: none; }\n                .spa-step.active { display: block; }\n                .spa-label { display: block; font-weight: 800; margin-bottom: 10px; color: #475569; font-size: 14px; }\n                .spa-input, .spa-select { width: 100%; padding: 15px; border: 2px solid #e2e8f0; border-radius: 12px; margin-bottom: 20px; font-size: 16px; outline: none; box-sizing: border-box; }\n                .spa-time-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 20px; }\n                .spa-time-btn { background: #f8fafc; border: 2px solid #e2e8f0; padding: 12px; border-radius: 10px; cursor: pointer; font-weight: 800; transition: 0.2s; text-align: center; }\n                .spa-time-btn:hover { border-color: #3b82f6; }\n                .spa-time-btn.selected { background: #3b82f6; color: #fff; border-color: #3b82f6; }\n                .spa-btn-primary { width: 100%; background: #3b82f6; color: #fff; padding: 18px; border: none; border-radius: 12px; font-weight: 900; cursor: pointer; font-size: 16px; }\n                .spa-btn-primary:disabled { background: #cbd5e1; cursor: not-allowed; }\n                .spa-btn-back { background: transparent; border: none; color: #64748b; font-weight: 800; cursor: pointer; margin-bottom: 15px; display: inline-block; }\n            <\/style>\n            <div class=\"spa-booking-header\"><h2>Reserva tu Espacio<\/h2><p style=\"margin:5px 0 0 0; opacity:0.7;\">Confirma tu cita en segundos.<\/p><\/div>\n            <div class=\"spa-step active\" id=\"step-1\">\n                <label class=\"spa-label\">Elige un Servicio:<\/label>\n                <select id=\"wb_servicio\" class=\"spa-select\"><option value=\"\">-- Seleccionar --<\/option><option value=\"1\">CORTE MARCADO<\/option><\/select>\n                <label class=\"spa-label\">Elige un D\u00eda:<\/label>\n                <input type=\"date\" id=\"wb_fecha\" class=\"spa-input\" min=\"2026-04-27\">\n                <button class=\"spa-btn-primary\" id=\"btn-next-1\" disabled>Ver Horas Disponibles<\/button>\n            <\/div>\n            <div class=\"spa-step\" id=\"step-2\">\n                <button class=\"spa-btn-back\" id=\"btn-back-1\">\u2190 Volver<\/button>\n                <label class=\"spa-label\">Horas libres para el <span id=\"lbl-fecha-show\"><\/span>:<\/label>\n                <div id=\"wb_horas_grid\" class=\"spa-time-grid\"><\/div>\n                <button class=\"spa-btn-primary\" id=\"btn-next-2\" style=\"display:none;\">Continuar<\/button>\n            <\/div>\n            <div class=\"spa-step\" id=\"step-3\">\n                <button class=\"spa-btn-back\" id=\"btn-back-2\">\u2190 Volver<\/button>\n                <label class=\"spa-label\">Tu Nombre:<\/label>\n                <input type=\"text\" id=\"wb_nombre\" class=\"spa-input\" placeholder=\"Nombre completo\">\n                <label class=\"spa-label\">Tu Tel\u00e9fono:<\/label>\n                <input type=\"tel\" id=\"wb_telefono\" class=\"spa-input\" placeholder=\"8888-8888\">\n                <button class=\"spa-btn-primary\" id=\"btn-confirmar-reserva\">Confirmar Ahora<\/button>\n            <\/div>\n            <div class=\"spa-step\" id=\"step-4\" style=\"text-align:center;\"><h2 style=\"color: #10b981 !important;\">\u00a1Cita Confirmada!<\/h2><p>Te hemos agendado correctamente.<\/p><a href=\"#\" id=\"btn-whatsapp-cliente\" target=\"_blank\" style=\"display:block; background:#25D366; color:#fff; padding:15px; border-radius:12px; text-decoration:none; font-weight:900; margin-top:20px;\">\ud83d\udcf1 Avisar por WhatsApp<\/a><\/div>\n        <\/div>\n        <script>\n            (function() {\n                var initApp = function() {\n                    var $ = jQuery; var ajaxUrl = 'https:\/\/sospuravida.com\/SPA\/wp-admin\/admin-ajax.php'; var selected = { srvId: '', srvNom: '', fecha: '', hora: '' };\n                    $('#wb_servicio, #wb_fecha').on('change', function() { if($('#wb_servicio').val() && $('#wb_fecha').val()) $('#btn-next-1').prop('disabled', false); });\n                    $('#btn-next-1').on('click', function() {\n                        selected.srvId = $('#wb_servicio').val(); selected.srvNom = $(\"#wb_servicio option:selected\").text(); selected.fecha = $('#wb_fecha').val();\n                        $('#lbl-fecha-show').text(selected.fecha); $('.spa-step').removeClass('active'); $('#step-2').addClass('active');\n                        $.post(ajaxUrl, { action: 'spa_web_get_horas', fecha: selected.fecha }, function(res) {\n                            var grid = $('#wb_horas_grid').empty();\n                            if(res.success && res.data.length > 0) { res.data.forEach(h => grid.append('<div class=\"spa-time-btn\" data-h=\"'+h+'\">'+h+'<\/div>')); }\n                            else { grid.html('<p style=\"grid-column:1\/-1; text-align:center;\">No hay horas disponibles.<\/p>'); }\n                        });\n                    });\n                    $(document).on('click', '.spa-time-btn', function() { $('.spa-time-btn').removeClass('selected'); $(this).addClass('selected'); selected.hora = $(this).data('h'); $('#btn-next-2').show(); });\n                    $('#btn-back-1').on('click', function() { $('.spa-step').removeClass('active'); $('#step-1').addClass('active'); });\n                    $('#btn-back-2').on('click', function() { $('.spa-step').removeClass('active'); $('#step-2').addClass('active'); });\n                    $('#btn-next-2').on('click', function() { $('.spa-step').removeClass('active'); $('#step-3').addClass('active'); });\n                    $('#btn-confirmar-reserva').on('click', function() {\n                        var nom = $('#wb_nombre').val(); var tel = $('#wb_telefono').val(); if(!nom || !tel) return alert('Por favor ingresa tus datos.');\n                        var btn = $(this).prop('disabled', true).text('Procesando...');\n                        $.post(ajaxUrl, { action: 'spa_web_guardar_cita', nombre: nom, telefono: tel, servicio_id: selected.srvId, fecha: selected.fecha, hora: selected.hora }, function(res) {\n                            if(res.success) { $('.spa-step').removeClass('active'); $('#step-4').addClass('active'); var msg = encodeURIComponent(\"\u00a1Hola! Reserv\u00e9 mi cita desde la web:\\n\\n\ud83d\udc64 Nombre: \"+nom+\"\\n\u2702\ufe0f Servicio: \"+selected.srvNom+\"\\n\ud83d\uddd3\ufe0f Fecha: \"+selected.fecha+\"\\n\u23f0 Hora: \"+selected.hora); $('#btn-whatsapp-cliente').attr('href', 'https:\/\/wa.me\/50663253509?text='+msg); }\n                        });\n                    });\n                };\n                var checkJquery = setInterval(function() { if (window.jQuery) { clearInterval(checkJquery); initApp(); } }, 100);\n            })();\n        <\/script>\n        <\/p>\n<p>\u00a0<\/p>\n<p><\/p>\n<\/div><\/section>\r\n<div  class='flex_column av-av_one_full-4453fbc7e8da734fe9d5824da1c72891 av_one_full  avia-builder-el-1  el_after_av_textblock  avia-builder-el-last  first flex_column_div  column-top-margin'     ><section  class='av_textblock_section av-mmmzigfh-314f28ea2b2e2b7a0a11549d986765b4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/CreativeWork\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: center;\">Aqu\u00ed puedes reservar tu cita llena el formulario seleccionando la fecha y la hora que quieres la Cita<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-33 aligncenter\" src=\"https:\/\/sospuravida.com\/SPA\/wp-content\/uploads\/2026\/03\/sos-barber-293x300.png\" alt=\"\" width=\"71\" height=\"73\" srcset=\"https:\/\/sospuravida.com\/SPA\/wp-content\/uploads\/2026\/03\/sos-barber-293x300.png 293w, https:\/\/sospuravida.com\/SPA\/wp-content\/uploads\/2026\/03\/sos-barber-36x36.png 36w, https:\/\/sospuravida.com\/SPA\/wp-content\/uploads\/2026\/03\/sos-barber.png 514w\" sizes=\"auto, (max-width: 71px) 100vw, 71px\" \/><\/p>\n<\/div><\/section><\/div>","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-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sospuravida.com\/SPA\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sospuravida.com\/SPA\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sospuravida.com\/SPA\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sospuravida.com\/SPA\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sospuravida.com\/SPA\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":4,"href":"https:\/\/sospuravida.com\/SPA\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":35,"href":"https:\/\/sospuravida.com\/SPA\/wp-json\/wp\/v2\/pages\/7\/revisions\/35"}],"wp:attachment":[{"href":"https:\/\/sospuravida.com\/SPA\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}