{"id":298,"date":"2025-10-05T19:06:32","date_gmt":"2025-10-05T22:06:32","guid":{"rendered":"https:\/\/brazil.digitona.com\/?page_id=298"},"modified":"2025-10-05T21:48:38","modified_gmt":"2025-10-06T00:48:38","slug":"book","status":"publish","type":"page","link":"https:\/\/brazil.digitona.com\/pt\/book\/","title":{"rendered":"Book"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"298\" class=\"elementor elementor-298\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ddf64b6 tb lr e-flex e-con-boxed e-con e-parent\" data-id=\"ddf64b6\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-22a5a31 elementor-widget elementor-widget-shortcode\" data-id=\"22a5a31\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    \n    <div class=\"form-container\">\n        <!-- Step 1: Main Booking Form -->\n        <div id=\"step1\">\n            <h1 class=\"text-3xl font-bold mb-8\">Agendar transporte<\/h1>\n\n            <!-- Addresses -->\n            <div class=\"address-wrapper grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] items-center gap-x-4\">\n                <div class=\"relative w-full\">\n                    <label for=\"fromAddress\" class=\"font-semibold text-red-500\">De<\/label>\n                    <input type=\"text\" id=\"fromAddress\" class=\"w-full py-2 border-b-2 border-gray-300 focus:border-teal-400 outline-none transition address-input\" placeholder=\"Informe o endere\u00e7o de coleta\" autocomplete=\"off\">\n                    <small id=\"fromAddressError\" class=\"text-red-500 text-xs mt-1 hidden\">Street number is missing<\/small>\n                <\/div>\n\n                <div class=\"flex justify-center w-full my-2 md:my-0\">\n                    <button id=\"swapAddresses\" class=\"p-2 rounded-full swap-button\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 20 17\" class=\"h-5 w-5 text-gray-700\">\n                            <g fill=\"currentColor\">\n                            <path d=\"m13.2055 1.11252c.4042-.405675.8527-.741967 1.4259-.833288.1221-.019455.2452-.029232.3686-.029232s.2466.009776.3687.029231c.5732.091322 1.0217.427615 1.4258.833289.3938.39531.8338.95022 1.3669 1.6227l1.4263 1.79881c.2574.32457.2029.79631-.1217 1.05365-.3246.25735-.7963.20286-1.0537-.12171l-1.3978-1.76297c-.5582-.70402-.9418-1.18603-1.2645-1.51348v12.81048c0 .4142-.3358.75-.75.75s-.75-.3358-.75-.75v-12.81048c-.3226.32745-.7062.80945-1.2644 1.51348l-1.3979 1.76297c-.2573.32457-.7291.37906-1.0536.12171-.3246-.25734-.3791-.72908-.1218-1.05365l1.4263-1.79882c.5332-.67247.9732-1.22738 1.3669-1.62269z\"><\/path>\n                            <path d=\"m5.75003 2c0-.41421-.33579-.75-.75-.75-.41422 0-.75.33579-.75.75v12.8105c-.32266-.3275-.70625-.8095-1.26447-1.5135l-1.39785-1.763c-.25735-.3245-.729082-.379-1.05365-.1217-.324569.2574-.379062.7291-.121714 1.0537l1.426254 1.7988c.53318.6725.97315 1.2274 1.36694 1.6227.40411.4057.85265.7419 1.42582.8333.12211.0194.24528.0292.36867.0292.12338 0 .24656-.0098.36867-.0292.57317-.0914 1.02171-.4276 1.42582-.8333.39379-.3953.83376-.9503 1.36694-1.6227l1.42625-1.7988c.25735-.3246.20286-.7963-.12171-1.0537-.32457-.2573-.79631-.2028-1.05365.1217l-1.39785 1.763c-.55822.704-.94181 1.186-1.26447 1.5135z\"><\/path>\n                            <\/g>\n                        <\/svg>\n                    <\/button>\n                <\/div>\n\n                <div class=\"relative w-full\">\n                    <label for=\"toAddress\" class=\"font-semibold text-gray-600\">Para<\/label>\n                    <input type=\"text\" id=\"toAddress\" class=\"w-full py-2 border-b-2 border-gray-300 focus:border-teal-400 outline-none transition address-input\" placeholder=\"Informe o endere\u00e7o de entrega\" autocomplete=\"off\">\n                    <small id=\"toAddressError\" class=\"text-red-500 text-xs mt-1 hidden\">Street number is missing<\/small>\n                <\/div>\n            <\/div>\n\n            <!-- Date & Time -->\n            <div class=\"my-8\">\n                <label for=\"pickupDateTime\" class=\"font-semibold text-gray-600\">Quando a coleta deve ser feita, no m\u00ednimo?<\/label>\n                <input type=\"text\" id=\"pickupDateTime\" class=\"w-full md:w-1\/2 py-2 border-b-2 border-gray-300 focus:border-teal-400 outline-none transition\" placeholder=\"Selecione a data e o hor\u00e1rio\">\n            <\/div>\n\n            <!-- Goods -->\n            <div class=\"mb-8\">\n                <h2 class=\"text-xl font-semibold mb-4\">O que voc\u00ea deseja enviar?<\/h2>\n                <div id=\"goods-container\"><\/div>\n                <button id=\"add-item\" class=\"mt-4 px-4 py-2 bg-teal-500 text-white font-semibold rounded-lg hover:bg-teal-600 transition flex items-center gap-2\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z\" clip-rule=\"evenodd\" \/><\/svg>\n                    Adicionar outro objeto\n                <\/button>\n            <\/div>\n\n            <!-- Delivery Speed -->\n            <div class=\"mb-8\">\n                 <h2 class=\"text-xl font-semibold mb-4\">Com que rapidez deve ser feita a entrega?<\/h2>\n                 <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\" id=\"delivery-speed-container\">\n                     <div class=\"delivery-speed-card text-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition hover:border-teal-400 flex flex-col justify-between items-center\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/10\/simpel-truck.svg\" alt=\"Truck Icon\" onerror=\"this.src='https:\/\/placehold.co\/100x50\/e2e8f0\/9ca3af?text=Truck'\"><span class=\"font-semibold mt-2\">Imediato<\/span><\/div>\n                     <div class=\"delivery-speed-card text-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition hover:border-teal-400 flex flex-col justify-between items-center\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/10\/simpel-truck.svg\" alt=\"Truck Icon\" onerror=\"this.src='https:\/\/placehold.co\/100x50\/e2e8f0\/9ca3af?text=Truck'\"><span class=\"font-semibold mt-2\">Em at\u00e9 5 horas<\/span><\/div>\n                     <div class=\"delivery-speed-card text-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition hover:border-teal-400 flex flex-col justify-between items-center\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/10\/simpel-truck.svg\" alt=\"Truck Icon\" onerror=\"this.src='https:\/\/placehold.co\/100x50\/e2e8f0\/9ca3af?text=Truck'\"><span class=\"font-semibold mt-2\">Em 1\u20132 dias<\/span><\/div>\n                 <\/div>\n            <\/div>\n\n            <!-- Price Calculation -->\n            <div id=\"price-box\" class=\"p-6 rounded-lg bg-teal-50 min-h-[100px] flex items-center justify-center\">\n                <div id=\"price-placeholder\" class=\"text-gray-500\">O valor ser\u00e1 calculado aqui.<\/div>\n                <div id=\"price-loader\" class=\"loader hidden\"><\/div>\n                <div id=\"price-result\" class=\"text-center hidden\">\n                    <p class=\"text-gray-600\">Pre\u00e7o do transporte (incl. IVA)<\/p>\n                    <p id=\"price-value\" class=\"text-3xl font-bold text-teal-700\"><\/p>\n                    <p class=\"text-xs text-gray-500\">Pre\u00e7o sem IVA<\/p>\n                <\/div>\n            <\/div>\n             <button id=\"continue-button\" class=\"w-full mt-6 py-3 bg-teal-500 text-white font-bold rounded-lg hover:bg-teal-600 transition disabled:bg-gray-300 disabled:cursor-not-allowed\" disabled>Continuar<\/button>\n        <\/div>\n\n        <!-- Step 2: Confirmation -->\n        <div id=\"step2\" style=\"display: none;\">\n             <h1 class=\"text-3xl font-bold mb-6\">Confirme sua reserva<\/h1>\n             <div class=\"bg-yellow-50 border border-yellow-200 p-6 rounded-lg mb-8\">\n                 <h2 class=\"text-xl font-semibold mb-4\">Verifique sua reserva<\/h2>\n                 <div id=\"summary-content\" class=\"space-y-2 text-gray-700\"><\/div>\n                 <button id=\"change-button\" class=\"text-teal-600 font-semibold mt-4\">Alterar<\/button>\n             <\/div>\n            <div class=\"bg-teal-50 p-6 rounded-lg mb-8 text-center\">\n                <p class=\"text-gray-600\">Pre\u00e7o do transporte (incl. IVA)<\/p>\n                <p id=\"final-price\" class=\"text-3xl font-bold text-teal-700\"><\/p>\n                <p class=\"text-xs text-gray-500\">Pre\u00e7o sem IVA<\/p>\n            <\/div>\n             <div class=\"space-y-8\">\n                 <div>\n                     <h3 class=\"text-lg font-semibold mb-4 border-b pb-2\">Detalhes da reserva<\/h3>\n                     <div class=\"grid md:grid-cols-2 gap-4\">\n                         <input type=\"text\" placeholder=\"Nome da empresa (ex.: Simtra LTDA)\" class=\"form-input w-full py-2 border-b-2 border-gray-300\">\n                         <input type=\"text\" placeholder=\"N\u00famero do CNPJ (ex.: 12.345.678\/0001-90)\" class=\"form-input w-full py-2 border-b-2 border-gray-300\">\n                         <input type=\"tel\" placeholder=\"N\u00famero de telefone\" class=\"form-input w-full py-2 border-b-2 border-gray-300\">\n                         <input type=\"email\" placeholder=\"Endere\u00e7o de e-mail para confirma\u00e7\u00e3o\" class=\"form-input w-full py-2 border-b-2 border-gray-300\">\n                         <input type=\"email\" placeholder=\"Endere\u00e7o de e-mail para confirma\u00e7\u00e3o\" class=\"form-input w-full py-2 border-b-2 border-gray-300\">\n                     <\/div>\n                 <\/div>\n                 <div>\n                     <h3 class=\"text-lg font-semibold mb-4 border-b pb-2\">Detalhes da fatura<\/h3>\n                     <div class=\"grid md:grid-cols-2 gap-4\">\n                         <input type=\"text\" placeholder=\"Detalhes da fatura\" class=\"form-input w-full py-2 border-b-2 border-gray-300\">\n                         <input type=\"text\" placeholder=\"Refer\u00eancia do remetente\" class=\"form-input w-full py-2 border-b-2 border-gray-300\">\n                         <input type=\"text\" placeholder=\"Refer\u00eancia do destinat\u00e1rio\" class=\"form-input w-full py-2 border-b-2 border-gray-300\">\n                     <\/div>\n                 <\/div>\n                 <div>\n                     <h3 class=\"text-lg font-semibold mb-4 border-b pb-2\">Informa\u00e7\u00f5es sobre o destinat\u00e1rio<\/h3>\n                     <div class=\"grid md:grid-cols-2 gap-4\">\n                         <input type=\"text\" placeholder=\"Nome da empresa\/Nome\" class=\"form-input w-full py-2 border-b-2 border-gray-300\">\n                         <input type=\"tel\" placeholder=\"N\u00famero de telefone\" class=\"form-input w-full py-2 border-b-2 border-gray-300\">\n                     <\/div>\n                 <\/div>\n                  <div>\n                     <h3 class=\"text-lg font-semibold mb-4 border-b pb-2\">Outras informa\u00e7\u00f5es<\/h3>\n                     <div class=\"grid md:grid-cols-2 gap-4\">\n                         <textarea placeholder=\"Instru\u00e7\u00f5es de coleta\" class=\"form-input w-full py-2 border-b-2 border-gray-300 h-24\"><\/textarea>\n                         <textarea placeholder=\"Instru\u00e7\u00f5es de entrega\" class=\"form-input w-full py-2 border-b-2 border-gray-300 h-24\"><\/textarea>\n                     <\/div>\n                 <\/div>\n             <\/div>\n             <p class=\"text-xs text-center text-gray-500 mt-8\">Ao continuar, voc\u00ea concorda com nossos termos de servi\u00e7o e pol\u00edtica de privacidade.<\/p>\n             <button id=\"book-button\" class=\"w-full mt-4 py-3 bg-teal-500 text-white font-bold rounded-lg hover:bg-teal-600 transition\">Agendar transporte<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Goods Item Template -->\n    <template id=\"goods-item-template\">\n        <div class=\"goods-item mb-6 p-4 border rounded-lg\">\n            <div class=\"flex justify-end\">\n                <button class=\"remove-item hidden text-red-500 hover:text-red-700 text-sm font-semibold\">Remover<\/button>\n            <\/div>\n            <div class=\"grid grid-cols-2 gap-4 mb-4\">\n                <div class=\"item-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition text-center flex flex-col justify-between items-center\" data-type=\"pallet\">\n                    <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/10\/simpel_Pallet.svg\" alt=\"Pallet Icon\" class=\"mb-2\" onerror=\"this.src='https:\/\/placehold.co\/80x50\/e2e8f0\/9ca3af?text=Pallet'\">\n                    <span class=\"font-semibold\">Palete<\/span>\n                    <div class=\"quantity-selector hidden mt-2 flex items-center justify-center\">\n                        <button class=\"px-3 py-1 bg-gray-200 rounded-l-md hover:bg-gray-300 decrement\">-<\/button>\n                        <input type=\"number\" class=\"w-12 text-center border-t border-b border-gray-200\" value=\"1\" min=\"1\">\n                        <button class=\"px-3 py-1 bg-gray-200 rounded-r-md hover:bg-gray-300 increment\">+<\/button>\n                    <\/div>\n                <\/div>\n                <div class=\"item-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition text-center flex flex-col justify-between items-center\" data-type=\"package\">\n                    <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/10\/simpel_Package.svg\" alt=\"Package Icon\" class=\"mb-2\" onerror=\"this.src='https:\/\/placehold.co\/80x50\/e2e8f0\/9ca3af?text=Package'\">\n                    <span class=\"font-semibold\">Pacote<\/span>\n                    <div class=\"quantity-selector hidden mt-2 flex items-center justify-center\">\n                        <button class=\"px-3 py-1 bg-gray-200 rounded-l-md hover:bg-gray-300 decrement\">-<\/button>\n                        <input type=\"number\" class=\"w-12 text-center border-t border-b border-gray-200\" value=\"1\" min=\"1\">\n                        <button class=\"px-3 py-1 bg-gray-200 rounded-r-md hover:bg-gray-300 increment\">+<\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"details-section hidden mt-4 space-y-4\">\n                <div class=\"pallet-details hidden\">\n                     <div class=\"flex items-center gap-2 mb-4\">\n                        <input type=\"checkbox\" id=\"stackable\" class=\"stackable-checkbox h-4 w-4 text-teal-600 border-gray-300 rounded focus:ring-teal-500\">\n                        <label for=\"stackable\" class=\"font-semibold\">The goods are stackable<\/label>\n                        <div class=\"tooltip\">\n                             <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-gray-400\" viewbox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\" \/><\/svg>\n                            <span class=\"tooltiptext\">Your pallet must be able to be stacked with a pallet of the same weight on top without being damaged. Remember that the goods must be packaged and protected for normal goods handling.<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"package-details hidden\">\n                    <p class=\"font-semibold mb-2\">Selecione o tamanho do pacote<\/p>\n                    <div class=\"flex gap-6\">\n                        <label class=\"custom-radio-label\"><input type=\"radio\" name=\"package-size\" value=\"small\" class=\"custom-radio-input package-size-radio\" checked><span class=\"custom-radio-button\"><\/span>Pequeno<\/label>\n                        <label class=\"custom-radio-label\"><input type=\"radio\" name=\"package-size\" value=\"large\" class=\"custom-radio-input package-size-radio\"><span class=\"custom-radio-button\"><\/span>Grande<\/label>\n                    <\/div>\n                <\/div>\n                <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n                    <div class=\"input-with-unit\"><input type=\"number\" placeholder=\"Peso\/objeto\" class=\"w-full py-2 border-b-2 border-gray-300 dimension-input\"><span class=\"input-unit\">kg<\/span><\/div>\n                    <div class=\"input-with-unit\"><input type=\"number\" placeholder=\"Largura\" class=\"w-full py-2 border-b-2 border-gray-300 length-input dimension-input\"><span class=\"input-unit\">cm<\/span><\/div>\n                    <div class=\"input-with-unit\"><input type=\"number\" placeholder=\"Largura\" class=\"w-full py-2 border-b-2 border-gray-300 width-input dimension-input\"><span class=\"input-unit\">cm<\/span><\/div>\n                    <div class=\"input-with-unit\"><input type=\"number\" placeholder=\"Altura\" class=\"w-full py-2 border-b-2 border-gray-300 height-input dimension-input\"><span class=\"input-unit\">cm<\/span><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/template>\n    \n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/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-298","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/brazil.digitona.com\/pt\/wp-json\/wp\/v2\/pages\/298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brazil.digitona.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/brazil.digitona.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/brazil.digitona.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brazil.digitona.com\/pt\/wp-json\/wp\/v2\/comments?post=298"}],"version-history":[{"count":5,"href":"https:\/\/brazil.digitona.com\/pt\/wp-json\/wp\/v2\/pages\/298\/revisions"}],"predecessor-version":[{"id":325,"href":"https:\/\/brazil.digitona.com\/pt\/wp-json\/wp\/v2\/pages\/298\/revisions\/325"}],"wp:attachment":[{"href":"https:\/\/brazil.digitona.com\/pt\/wp-json\/wp\/v2\/media?parent=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}