{"id":20,"date":"2026-02-04T19:00:38","date_gmt":"2026-02-04T19:00:38","guid":{"rendered":"https:\/\/genisthis.com\/?page_id=20"},"modified":"2026-02-09T19:50:14","modified_gmt":"2026-02-09T19:50:14","slug":"formulario-referencia","status":"publish","type":"page","link":"https:\/\/genisthis.com\/?page_id=20","title":{"rendered":"Formulario referencia"},"content":{"rendered":"\n<p>formulario referencia <\/p>\n\n\n\n<p><\/p>\n\n\n\n    <div x-data=\"manualForm()\" x-init=\"initPhone()\" class=\"max-w-2xl mx-auto p-6 bg-white rounded-xl shadow-lg border border-gray-100 my-8 font-sans\">\n        \n        <div class=\"mb-6 border-b pb-4\">\n            <h2 class=\"text-2xl font-bold text-gray-800\">Solicitud Genisthis<\/h2>\n            <p class=\"text-gray-500 text-sm\">Env\u00edo con llaves \"dot-notation\".<\/p>\n        <\/div>\n\n        <div class=\"space-y-5\">\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                <div>\n                    <label class=\"block text-sm font-medium text-gray-700 mb-1\">Nombre<\/label>\n                    <input type=\"text\" x-model=\"nome\" class=\"w-full px-4 py-2 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500\">\n                <\/div>\n                <div>\n                    <label class=\"block text-sm font-medium text-gray-700 mb-1\">Email<\/label>\n                    <input type=\"email\" x-model=\"email\" class=\"w-full px-4 py-2 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500\">\n                <\/div>\n            <\/div>\n\n            <div>\n                <label class=\"block text-sm font-medium text-gray-700 mb-1\">WhatsApp<\/label>\n                <input type=\"tel\" id=\"manual_phone_input\" class=\"w-full px-4 py-2 border border-gray-300 rounded-lg outline-none\">\n            <\/div>\n\n            <div class=\"pt-4 border-t\">\n                <div class=\"mb-4\">\n                    <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u00c1rea Facial<\/label>\n                    <select x-model=\"area_facial\" class=\"w-full px-4 py-2 border border-gray-300 rounded-lg bg-white outline-none\">\n                        <option value=\"\" disabled>Selecciona...<\/option>\n                        <option value=\"Frente\">Frente<\/option>\n                        <option value=\"Ojos\">Ojos<\/option>\n                        <option value=\"Labios\">Labios<\/option>\n                    <\/select>\n                <\/div>\n                <div>\n                    <label class=\"block text-sm font-medium text-gray-700 mb-1\">Pregunta<\/label>\n                    <textarea x-model=\"pregunta\" rows=\"2\" class=\"w-full px-4 py-2 border border-gray-300 rounded-lg outline-none\"><\/textarea>\n                <\/div>\n            <\/div>\n\n            <div class=\"pt-4 border-t\">\n                <label class=\"block text-sm font-medium text-gray-700 mb-2\">Archivos<\/label>\n                <div class=\"border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:bg-gray-50 transition relative\">\n                    <input type=\"file\" multiple @change=\"addFiles($event)\" class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\">\n                    <p class=\"text-blue-600 font-bold\">Subir archivos<\/p>\n                <\/div>\n                <div class=\"mt-4 space-y-2\">\n                    <template x-for=\"(f, index) in archivos\" :key=\"index\">\n                        <div class=\"flex justify-between items-center bg-gray-50 p-2 rounded text-sm border\">\n                            <span x-text=\"f.name\" class=\"font-medium truncate w-3\/4\"><\/span>\n                            <button @click=\"archivos.splice(index, 1)\" class=\"text-red-500 font-bold px-2\">X<\/button>\n                        <\/div>\n                    <\/template>\n                <\/div>\n            <\/div>\n\n            <div class=\"pt-6\">\n                <button @click=\"enviar()\" :disabled=\"loading\" \n                    class=\"w-full bg-slate-900 text-white font-bold py-3 px-4 rounded-lg shadow hover:bg-black transition flex justify-center items-center disabled:opacity-50\">\n                    <span x-show=\"loading\" class=\"animate-spin mr-2 h-5 w-5 border-2 border-white border-t-transparent rounded-full\"><\/span>\n                    <span x-text=\"loading ? 'Enviando...' : 'Enviar Solicitud'\"><\/span>\n                <\/button>\n            <\/div>\n            \n            <div x-show=\"mensaje\" x-text=\"mensaje\" class=\"mt-4 p-4 bg-gray-100 rounded-lg text-center font-medium\" style=\"display: none;\"><\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n    function manualForm() {\n        return {\n            loading: false,\n            iti: null,\n            mensaje: '',\n            \n            \/\/ Variables internas de Alpine (simples)\n            nome: '',\n            email: '',\n            whatsapp: '',\n            area_facial: '',\n            pregunta: '',\n            archivos: [],\n\n            initPhone() {\n                const el = document.querySelector(\"#manual_phone_input\");\n                if(el) {\n                    this.iti = window.intlTelInput(el, {\n                        utilsScript: \"https:\/\/cdn.jsdelivr.net\/npm\/intl-tel-input@18.2.1\/build\/js\/utils.js\",\n                        preferredCountries: [\"br\", \"cl\", \"ar\"],\n                        separateDialCode: true\n                    });\n                }\n            },\n\n            addFiles(e) {\n                for (let i = 0; i < e.target.files.length; i++) {\n                    this.archivos.push(e.target.files[i]);\n                }\n                e.target.value = '';\n            },\n\n            async enviar() {\n                this.loading = true;\n                this.mensaje = '';\n                \n                if (this.iti) this.whatsapp = this.iti.getNumber();\n\n                const datos = new FormData();\n\n                \/\/ --- AQU\u00cd EST\u00c1 EL CAMBIO PARA TU ESTRUCTURA DESEADA ---\n                \n                \/\/ 1. Datos del Cliente\n                datos.append('client.nome', this.nome);\n                datos.append('client.email', this.email);\n                datos.append('client.whatsapp', this.whatsapp);\n                \n                \/\/ 2. Datos del Producto\n                datos.append('product.key', 'omfacial');\n                datos.append('product.area', this.area_facial);\n                datos.append('product.pregunta', this.pregunta);\n\n                \/\/ 3. Archivos (Binarios)\n                this.archivos.forEach(archivo => {\n                    datos.append('files', archivo);\n                });\n\n                try {\n                    const respuesta = await fetch('https:\/\/flow.genisthis.com\/webhook\/gen_product', {\n                        method: 'POST',\n                        body: datos \n                    });\n\n                    if (respuesta.ok) {\n                        this.mensaje = '\u00a1Enviado con \u00e9xito!';\n                        this.archivos = [];\n                    } else {\n                        this.mensaje = 'Error en el servidor.';\n                    }\n                } catch (e) {\n                    console.error(e);\n                    this.mensaje = 'Error de conexi\u00f3n.';\n                }\n                \n                this.loading = false;\n            }\n        }\n    }\n    <\/script>\n    \n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>formulario referencia<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-20","page","type-page","status-publish"],"acf":[],"_links":{"self":[{"href":"https:\/\/genisthis.com\/index.php?rest_route=\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/genisthis.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/genisthis.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/genisthis.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/genisthis.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20"}],"version-history":[{"count":3,"href":"https:\/\/genisthis.com\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/genisthis.com\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/genisthis.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}