{"id":7,"date":"2026-04-29T06:55:50","date_gmt":"2026-04-29T06:55:50","guid":{"rendered":"https:\/\/soyokaze.pl\/sandbox\/?p=7"},"modified":"2026-05-09T09:59:41","modified_gmt":"2026-05-09T09:59:41","slug":"pst-reservation-calculator","status":"publish","type":"post","link":"https:\/\/soyokaze.pl\/sandbox\/pst-reservation-calculator\/","title":{"rendered":"Pst-Reservation-Calculator"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" data-id=\"18\" src=\"https:\/\/soyokaze.pl\/sandbox\/wp-content\/uploads\/2026\/04\/pexels-betul-gunes-1793145775-29176717-1024x683.jpg\" alt=\"\" class=\"wp-image-18\" srcset=\"https:\/\/soyokaze.pl\/sandbox\/wp-content\/uploads\/2026\/04\/pexels-betul-gunes-1793145775-29176717-1024x683.jpg 1024w, https:\/\/soyokaze.pl\/sandbox\/wp-content\/uploads\/2026\/04\/pexels-betul-gunes-1793145775-29176717-300x200.jpg 300w, https:\/\/soyokaze.pl\/sandbox\/wp-content\/uploads\/2026\/04\/pexels-betul-gunes-1793145775-29176717-768x512.jpg 768w, https:\/\/soyokaze.pl\/sandbox\/wp-content\/uploads\/2026\/04\/pexels-betul-gunes-1793145775-29176717-1536x1024.jpg 1536w, https:\/\/soyokaze.pl\/sandbox\/wp-content\/uploads\/2026\/04\/pexels-betul-gunes-1793145775-29176717-2048x1365.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"w-full\">\n    <form id=\"formCalculate\" action=\"javascript:void(0)\">\n        <div class=\"rounded-2xl border border-gray-200 bg-white shadow-lg p-6 space-y-5\">\n\n            <!-- Wybierz termin -->\n            <div class=\"space-y-1.5\">\n                <label class=\"block text-sm font-semibold text-gray-600 uppercase tracking-widest\">\n                    Wybierz termin wynajmu\n                    <span class=\"text-rose-500\">*<\/span>\n                <\/label>\n                <div class=\"grid grid-cols-2 gap-3\">\n                    <input id=\"StartDate\" readonly name=\"start_date\"\n                        class=\"hasDatepicker w-full px-4 py-3 rounded-xl border border-gray-200 bg-gray-50 text-gray-700 placeholder-gray-400 text-sm focus:outline-none focus:ring-2 focus:ring-purple-400 cursor-pointer\"\n                        required placeholder=\"Data od\">\n                    <input id=\"EndDate\" readonly name=\"end_date\"\n                        class=\"hasDatepicker w-full px-4 py-3 rounded-xl border border-gray-200 bg-gray-50 text-gray-700 placeholder-gray-400 text-sm focus:outline-none focus:ring-2 focus:ring-purple-400 cursor-pointer\"\n                        required placeholder=\"Data do\">\n                <\/div>\n            <\/div>\n\n            <!-- Kod rabatowy -->\n            <div class=\"flex flex-wrap items-center gap-3\">\n                <input id=\"discount_code\" name=\"discount_code_display\" type=\"text\"\n                    placeholder=\"Kod rabatowy (opcjonalnie)\"\n                    class=\"flex-1 min-w-0 px-4 py-3 rounded-xl border border-gray-200 bg-gray-50 text-gray-700 placeholder-gray-400 text-sm focus:outline-none focus:ring-2 focus:ring-purple-400 uppercase\">\n                <button type=\"button\" id=\"kc-apply-discount\"\n                    class=\"button-post px-5 py-3 rounded-xl bg-gradient-to-r from-fuchsia-500 via-purple-500 to-indigo-500 text-white text-sm font-semibold hover:opacity-90 transition whitespace-nowrap\">\n                    Zastosuj\n                <\/button>\n                <span id=\"kc-discount-msg\" class=\"w-full text-sm hidden\"><\/span>\n            <\/div>\n\n            <!-- Suma -->\n            <div class=\"rounded-xl bg-indigo-50 border border-indigo-100 px-4 py-3 space-y-2\">\n                <div class=\"flex flex-wrap items-center gap-1.5 text-sm\">\n                    <span class=\"text-gray-500\">Suma:<\/span>\n                    <span class=\"wyniknetto font-bold text-indigo-700\"><\/span>\n                    <span class=\"text-gray-500\">z\u0142 netto<\/span>\n                    <span class=\"text-gray-300\">\/<\/span>\n                    <span class=\"wynikbrutto font-bold text-indigo-700\"><\/span>\n                    <span class=\"text-gray-500\">z\u0142 brutto<\/span>\n                    <span id=\"opis\" class=\"text-gray-400 text-xs\"><\/span>\n                    <input type=\"hidden\" id=\"type\" name=\"type\" value=\"kamper\">\n                    <input type=\"hidden\" name=\"wyniknetto\" id=\"wyniknetto\">\n                    <input type=\"hidden\" name=\"wynikbrutto\" id=\"wynikbrutto\">\n                <\/div>\n                <p class=\"desc text-xs text-gray-400\"><\/p>\n                <div class=\"error hidden\"><span class=\"text-xs text-rose-500\"><\/span><\/div>\n\n                <!-- Dodatkowe op\u0142aty -->\n                <div id=\"additional_fees\" class=\"text-xs text-gray-500 space-y-0.5 pt-1 border-t border-indigo-100\">\n                    <p>+ op\u0142ata serwisowa:\n                        <span class=\"service_pay_netto font-medium text-gray-700\"><\/span> z\u0142 netto \/\n                        <span class=\"service_pay_brutto font-medium text-gray-700\"><\/span> z\u0142 brutto\n                    <\/p>\n                    <p>+ zwrotna kaucja:\n                        <span class=\"deposit font-medium text-gray-700\"><\/span> z\u0142 brutto\n                    <\/p>\n                    <p>+ podstawienie:\n                        <span class=\"delivery_netto font-medium text-gray-700\"><\/span> z\u0142 netto\/km \/\n                        <span class=\"delivery_brutto font-medium text-gray-700\"><\/span> z\u0142 brutto\/km\n                    <\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Przycisk -->\n            <button type=\"submit\" id=\"calc\"\n                class=\"button-post w-full py-3.5 rounded-xl bg-gradient-to-r from-fuchsia-500 via-purple-500 to-indigo-500 text-white font-bold text-sm tracking-wide hover:opacity-90 active:scale-95 transition-all shadow-lg\">\n                REZERWUJ\u0118 !\n            <\/button>\n\n        <\/div>\n    <\/form>\n<\/div>\n<div class=\"popup-calc fixed inset-0 top-6 bottom-6 bg-gradient-to-br from-slate-900 via-purple-900 to-black text-white backdrop-blur-sm z-[9999] grid place-items-center  p-6 overflow-none\" style=\"display:none;\">\n    <!-- <div class=\"popup-calc fixed min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-black text-white grid place-items-center p-6\" style=\"display:none;\">\n -->\n    <div class=\"w-full max-w-7xl\">\n        <!-- Przycisk zamkni\u0119cia -->\n        <button class=\"close-popup absolute top-2 right-2 w-9 h-9 rounded-full bg-black\/5 hover:bg-white\/20 flex items-center justify-center transition z-10\">\n            <i data-lucide=\"x\" class=\"w-4 h-4 text-white\"><\/i>\n        <\/button>\n        <!-- Header \/ Intro -->\n        <div class=\"mb-6 text-center\">\n            <h1 class=\"text-3xl font-extrabold tracking-tight\" id=\"h1-title\"><\/h1>\n            <p class=\"text-white\/70 mt-1\">Wype\u0142nij formularz rezerwacji.<\/p>\n        <\/div>\n\n        <!-- Card -->\n        <div class=\"relative rounded-2xl border border-white\/15 bg-white\/10 backdrop-blur-xl shadow-glow overflow-hidden\">\n\n            <!-- Stepper -->\n            <div class=\"relative px-6 pt-6 pb-4\">\n                <div class=\"flex items-center justify-between text-sm\">\n                    <div class=\"flex items-center gap-3\">\n                        <div class=\"step-dot h-8 w-8 rounded-full grid place-items-center bg-white\/20 border border-white\/30\" data-step=\"0\">\n                            <span class=\"font-semibold\">1<\/span>\n                        <\/div>\n                        <div class=\"hidden sm:block\">\n                            <div class=\"font-semibold\">Dane kontaktowe<\/div>\n                            <div class=\"text-white\/60 text-xs\"><\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"flex items-center gap-3\">\n                        <div class=\"step-dot h-8 w-8 rounded-full grid place-items-center bg-white\/10 border border-white\/20\" data-step=\"1\">\n                            <span class=\"font-semibold\">2<\/span>\n                        <\/div>\n                        <div class=\"hidden sm:block\">\n                            <div class=\"font-semibold\">Dodatkowe informacje<\/div>\n                            <div class=\"text-white\/60 text-xs\"><\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"flex items-center gap-3\">\n                        <div class=\"step-dot h-8 w-8 rounded-full grid place-items-center bg-white\/10 border border-white\/20\" data-step=\"2\">\n                            <span class=\"font-semibold\">3<\/span>\n                        <\/div>\n                        <div class=\"hidden sm:block\">\n                            <div class=\"font-semibold\">Podsumowanie<\/div>\n                            <div class=\"text-white\/60 text-xs\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Progress line -->\n                <div class=\"absolute left-6 right-6 top-[72px] h-1 bg-white\/10 rounded-full\">\n                    <div id=\"progress\" class=\"h-1 bg-gradient-to-r from-fuchsia-500 via-purple-500 to-indigo-500 rounded-full transition-all duration-500\" style=\"width: 0%\"><\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Form body -->\n            <form id=\"msf\" class=\"p-6 space-y-6\" novalidate>\n\n                <!-- STEP 1: Account -->\n                <section class=\"step\" data-step=\"0\">\n                    <div class=\"grid gap-4\">\n                        <div>\n                            <label for=\"email\" class=\"block text-sm font-medium mb-1\">Email<\/label>\n                            <div class=\"relative\">\n                                <input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" required class=\"peer w-full rounded-xl bg-white\/10 border border-white\/20 text-white placeholder-white\/40 px-11 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500\" placeholder=\"twoj@adres.pl\" \/>\n                                <i data-lucide=\"mail\" class=\"absolute left-3 top-1\/2 -translate-y-1\/2 h-5 w-5 text-white\/60\"><\/i>\n                            <\/div>\n                            <p class=\"mt-1 text-xs text-red-300 hidden\" data-error=\"email\">Wpisz prawid\u0142owy adres email.<\/p>\n                        <\/div>\n\n                        <div>\n                            <label for=\"fullname\" class=\"block text-sm font-medium mb-1\">Imi\u0119 i nazwisko<\/label>\n                            <div class=\"relative\">\n                                <input id=\"fullname\" name=\"fullname\" type=\"text\" autocomplete=\"name\" required class=\"peer w-full rounded-xl bg-white\/10 border border-white\/20 text-white placeholder-white\/40 px-11 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500\" placeholder=\"Twoje imi\u0119 i nazwisko\" \/>\n                                <i data-lucide=\"user\" class=\"absolute left-3 top-1\/2 -translate-y-1\/2 h-5 w-5 text-white\/60\"><\/i>\n                            <\/div>\n                            <p class=\"mt-1 text-xs text-red-300 hidden\" data-error=\"fullname\">Wpisz prawid\u0142owe imi\u0119 i nazwisko.<\/p>\n                        <\/div>\n\n                        <div>\n                            <label for=\"phone\" class=\"block text-sm font-medium mb-1\">Numer telefonu<\/label>\n                            <div class=\"relative\">\n                                <input id=\"phone\" name=\"phone\" type=\"text\" autocomplete=\"tel\" required class=\"peer w-full rounded-xl bg-white\/10 border border-white\/20 text-white placeholder-white\/40 px-11 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500\" placeholder=\"Tw\u00f3j numer telefonu\" \/>\n                                <i data-lucide=\"phone\" class=\"absolute left-3 top-1\/2 -translate-y-1\/2 h-5 w-5 text-white\/60\"><\/i>\n                            <\/div>\n                            <p class=\"mt-1 text-xs text-red-300 hidden\" data-error=\"phone\">Wpisz prawid\u0142owy numer telefonu.<\/p>\n                        <\/div>\n\n\n\n                        <div class=\"flex items-center gap-2 text-sm\">\n                            <input id=\"tos1\" type=\"checkbox\" class=\"accent-purple-500\">\n                            <label for=\"tos1\" class=\"text-white\/80\">Zaakceptuj nasz <a href=\"#\" class=\"underline decoration-purple-400\/70 hover:text-white\">Regulamin<\/a>.<\/label>\n                        <\/div>\n                    <\/div>\n                <\/section>\n\n                <!-- STEP 2: Profile -->\n                <section class=\"step hidden\" data-step=\"1\">\n                    <div class=\"grid gap-4\">\n                        <div>\n                            <label for=\"extramessage\" class=\"block text-sm font-medium mb-1\">Dodatkowe informacje<\/label>\n                            <div class=\"relative\">\n                                <textarea id=\"extramessage\" name=\"extramessage\" rows=\"3\" required class=\"w-full appearance-none rounded-xl bg-white\/10 border border-white\/20 text-white placeholder:white\/40 px-11 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500\" placeholder=\"Wpisz dodatkowe informacje\"><\/textarea>\n                            <\/div>\n                            <p class=\"mt-1 text-xs text-red-300 hidden\" data-error=\"extramessage\">Please provide additional information.<\/p>\n                        <\/div>\n                        <p class=\"mt-1 text-xs text-red-300 hidden\" data-error=\"extramessage\">Please select your role.<\/p>\n                    <\/div>\n\n                <\/section>\n\n                <!-- STEP 3: Review -->\n                <section class=\"step hidden\" data-step=\"2\">\n                    <div class=\"grid gap-4\">\n                        <div class=\"rounded-xl border border-white\/15 bg-white\/5 p-4\">\n                            <h3 class=\"font-semibold mb-2\">Podsumowanie<\/h3>\n                            <dl class=\"grid grid-cols-3 gap-2 text-sm\">\n                                <dt class=\"text-white\/60\">Email<\/dt>\n                                <dd class=\"col-span-2 font-medium\" id=\"r-email\">\u2014<\/dd>\n\n                                <dt class=\"text-white\/60\">Imi\u0119 i Nazwisko<\/dt>\n                                <dd class=\"col-span-2 font-medium\" id=\"r-fullname\">\u2014<\/dd>\n\n                                <dt class=\"text-white\/60\">Phone<\/dt>\n                                <dd class=\"col-span-2 font-medium\" id=\"r-phone\">\u2014<\/dd>\n\n                                <dt class=\"text-white\/60\">Dodatkowe informacje<\/dt>\n                                <dd class=\"col-span-2 font-medium\" id=\"r-extramessage\">\u2014<\/dd>\n\n                                <dt class=\"text-white\/60\">Typ pojazdu<\/dt>\n                                <dd class=\"col-span-2 font-medium\" id=\"r-type\">kamper<\/dd>\n\n                                <dt class=\"text-white\/60\">Okres rezerwacji<\/dt>\n                                <dd class=\"col-span-2 font-medium\" id=\"r-dates\">\u2014<\/dd>\n\n                                <dt class=\"text-white\/60\">Suma <small>netto\/brutto<\/small><\/dt>\n                                <dd class=\"col-span-2 font-medium\" id=\"r-reservation-sum\">\u2014<\/dd>\n\n                                <dt class=\"text-white\/60\">Dodatkowe op\u0142aty<\/dt>\n                                <dd class=\"col-span-2 font-medium\" id=\"r-additional-fees\">\u2014<\/dd>\n\n                            <\/dl>\n                        <\/div>\n\n                        <label class=\"flex items-start gap-3 text-sm\">\n                            <input id=\"consent\" type=\"checkbox\" class=\"mt-1 accent-purple-500\" required>\n                            <span>Potwierdzam, \u017ce podane powy\u017cej dane s\u0105 prawid\u0142owe i wyra\u017cam zgod\u0119 na przetwarzanie zgodnie z polityk\u0105 prywatno\u015bci.<\/span>\n                        <\/label>\n                        <p class=\"mt-1 text-xs text-red-300 hidden\" data-error=\"consent\">Aby kontynuowa\u0107, musisz wyrazi\u0107 zgod\u0119.<\/p>\n                    <\/div>\n                <\/section>\n\n                <!-- Actions -->\n                <div class=\"flex items-center justify-between pt-2\">\n                    <button type=\"button\" id=\"backBtn\" class=\"px-4 py-2 rounded-lg bg-white\/10 hover:bg-white\/20 disabled:opacity-40 disabled:cursor-not-allowed\" disabled>Powr\u00f3t<\/button>\n\n                    <div class=\"flex gap-2\">\n                        <button type=\"button\" id=\"nextBtn\" class=\"px-4 py-2 rounded-lg bg-gradient-to-r from-fuchsia-500 via-purple-500 to-indigo-500 hover:opacity-90\">\n                            Dalej\n                        <\/button>\n                        <button type=\"submit\" id=\"submitBtn\" class=\"hidden px-4 py-2 rounded-lg bg-emerald-500 hover:bg-emerald-600\">Submit<\/button>\n                    <\/div>\n                <\/div>\n            <\/form>\n\n            <!-- Success state -->\n            <div id=\"success\" class=\"hidden p-10 text-center\">\n                <div class=\"mx-auto mb-4 h-12 w-12 rounded-full bg-emerald-500\/20 grid place-items-center\">\n                    <svg viewBox=\"0 0 24 24\" class=\"h-6 w-6 text-emerald-400\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                        <path d=\"M20 6L9 17l-5-5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"text-2xl font-bold\">Wszystko gotowe!<\/h3>\n                <p class=\"text-white\/70 mt-1\">Twoja rezerwacja zosta\u0142a wys\u0142ana.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Footer note -->\n        <p class=\"mt-4 text-center text-xs text-white\/50\"><\/p>\n    <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/soyokaze.pl\/sandbox\/wp-json\/wp\/v2\/posts\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/soyokaze.pl\/sandbox\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/soyokaze.pl\/sandbox\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/soyokaze.pl\/sandbox\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/soyokaze.pl\/sandbox\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":11,"href":"https:\/\/soyokaze.pl\/sandbox\/wp-json\/wp\/v2\/posts\/7\/revisions"}],"predecessor-version":[{"id":32,"href":"https:\/\/soyokaze.pl\/sandbox\/wp-json\/wp\/v2\/posts\/7\/revisions\/32"}],"wp:attachment":[{"href":"https:\/\/soyokaze.pl\/sandbox\/wp-json\/wp\/v2\/media?parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/soyokaze.pl\/sandbox\/wp-json\/wp\/v2\/categories?post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/soyokaze.pl\/sandbox\/wp-json\/wp\/v2\/tags?post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}