{"id":37,"date":"2026-04-21T15:21:53","date_gmt":"2026-04-21T15:21:53","guid":{"rendered":"https:\/\/gabito.eu\/?page_id=37"},"modified":"2026-04-21T15:34:51","modified_gmt":"2026-04-21T15:34:51","slug":"cennik","status":"publish","type":"page","link":"https:\/\/gabito.eu\/?page_id=37","title":{"rendered":"Cennik"},"content":{"rendered":"\n<!-- \n  WSTAW TEN KOD DO BLOKU \"W\u0142asny HTML\" W WORDPRESS\n  (Gutenberg \u2192 W\u0142asny HTML)\n\n  WA\u017bNE: Zmie\u0144 warto\u015b\u0107 API_BASE poni\u017cej na sw\u00f3j prawdziwy adres API!\n-->\n\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<style>\n    .price-card, .package-card {\n        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;\n        border-radius: 12px;\n        overflow: hidden;\n        background-color: #ffffff;\n        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n    }\n    .price-card:hover, .package-card:hover {\n        transform: translateY(-5px);\n        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n    }\n    .promotional {\n        border: 3px solid #FFD700;\n        background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%);\n        position: relative;\n    }\n    .bestseller {\n        transform: scale(1.05);\n        position: relative;\n        border: 2px solid #1E3A8A;\n    }\n    .promotion-label {\n        font-size: 1.25rem;\n        font-weight: bold;\n        color: #D32F2F;\n        text-transform: uppercase;\n        margin-bottom: 0.5rem;\n        text-align: center;\n    }\n    .bestseller-label {\n        font-size: 1.25rem;\n        font-weight: bold;\n        color: #FFD700;\n        text-transform: uppercase;\n        margin-bottom: 0.5rem;\n        text-align: center;\n        background-color: #1E3A8A;\n        padding: 0.5rem;\n        border-radius: 4px;\n    }\n    .promotion-image {\n        width: 100%;\n        height: 150px;\n        object-fit: cover;\n        border-bottom: 2px solid #FFD700;\n        margin-bottom: 1rem;\n    }\n    .toggle-container {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 1rem;\n        margin-bottom: 2rem;\n        background-color: #ffffff;\n        padding: 1rem;\n        border-radius: 8px;\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n    }\n    .toggle-label {\n        font-size: 1.2rem;\n        font-weight: 600;\n        color: #333;\n    }\n    .toggle-switch {\n        position: relative;\n        display: inline-block;\n        width: 60px;\n        height: 34px;\n    }\n    .toggle-switch input {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n    .slider {\n        position: absolute;\n        cursor: pointer;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background-color: #ccc;\n        transition: 0.4s;\n        border-radius: 34px;\n    }\n    .slider:before {\n        position: absolute;\n        content: \"\";\n        height: 26px;\n        width: 26px;\n        left: 4px;\n        bottom: 4px;\n        background-color: white;\n        transition: 0.4s;\n        border-radius: 50%;\n    }\n    input:checked + .slider {\n        background-color: #2196F3;\n    }\n    input:checked + .slider:before {\n        transform: translateX(26px);\n    }\n    .buy-button {\n        background: linear-gradient(to right, #3B82F6, #60A5FA);\n        transition: background 0.3s ease;\n    }\n    .buy-button:hover {\n        background: linear-gradient(to right, #2563EB, #3B82F6);\n    }\n    .group-select, .module-select {\n        appearance: none;\n        background: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path d=\"M7 10l5 5 5-5z\"\/><\/svg>') no-repeat right 10px center;\n        background-size: 12px;\n        padding: 8px;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        width: 200px;\n    }\n    .description-list {\n        list-style-type: disc;\n        padding-left: 20px;\n        margin-top: 0.5rem;\n    }\n    .description-list li {\n        font-size: 0.9rem;\n        color: #4B5563;\n        margin-bottom: 0.25rem;\n    }\n<\/style>\n\n<div class=\"bg-gray-100 min-h-screen\">\n    <div class=\"container mx-auto p-6\">\n        <h1 id=\"page-title\" class=\"text-4xl font-bold text-center mb-8 text-gray-800\">Cennik<\/h1>\n   \n        <!-- Sekcja cennik\u00f3w -->\n        <section id=\"prices-section\" class=\"mb-12\">\n            <h2 class=\"text-2xl font-semibold mb-4 text-gray-700\">Cenniki<\/h2>\n            <div class=\"flex items-center gap-4 mb-4\">\n                <label for=\"moduleSelect\" class=\"text-lg font-semibold text-gray-700\">Modu\u0142:<\/label>\n                <select id=\"moduleSelect\" class=\"module-select\">\n                    <option value=\"\">Wybierz modu\u0142<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"toggle-container\">\n                <span class=\"toggle-label\">Netto<\/span>\n                <label class=\"toggle-switch\">\n                    <input type=\"checkbox\" id=\"priceToggle\">\n                    <span class=\"slider\"><\/span>\n                <\/label>\n                <span class=\"toggle-label\">Brutto<\/span>\n            <\/div>\n            <div id=\"prices-container\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n            <\/div>\n        <\/section>\n\n        <!-- Sekcja pakiet\u00f3w -->\n        <section id=\"packages-section\">\n            <h2 class=\"text-2xl font-semibold mb-4 text-gray-700\">Pakiety<\/h2>\n            <div class=\"flex items-center gap-4 mb-4\">\n                <label for=\"packageGroupSelect\" class=\"text-lg font-semibold text-gray-700\">Grupa pakiet\u00f3w:<\/label>\n                <select id=\"packageGroupSelect\" class=\"group-select\">\n                    <option value=\"\">Wszystkie grupy<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"toggle-container\">\n                <span class=\"toggle-label\">Netto<\/span>\n                <label class=\"toggle-switch\">\n                    <input type=\"checkbox\" id=\"packageToggle\">\n                    <span class=\"slider\"><\/span>\n                <\/label>\n                <span class=\"toggle-label\">Brutto<\/span>\n            <\/div>\n            <div id=\"packages-container\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n            <\/div>\n        <\/section>\n    <\/div>\n<\/div>\n\n<script>\n\/\/ ==================== KONFIGURACJA \u2013 ZMIE\u0143 TO! ====================\nconst API_BASE = 'https:\/\/api.gabito.bizgate.eu\/api\/v1';   \/\/ \u2190\u2190\u2190 ZMIE\u0143 NA SW\u00d3J ADRES API\n\n\/\/ ==================== ZMIENNE ====================\nlet showGrossPrice = false;\nlet showGrossPackage = false;\nlet packageGroups = [];\nlet selectedGroup = '';\nlet selectedModuleId = '';\nlet modules = [];\n\n\/\/ ==================== FUNKCJE POBIERANIA DANYCH ====================\nasync function fetchModules() {\n    try {\n        const res = await fetch(`${API_BASE}\/prices`);\n        if (!res.ok) throw new Error(res.status);\n        const result = await res.json();\n        \n        modules = Object.values(result.data.modules).map(group => ({\n            module_id: group[0].module_id,\n            module_name: group[0].module_name || 'Modu\u0142 ' + group[0].module_id\n        }));\n        \n        populateModuleSelect();\n        if (modules.length > 0) {\n            selectedModuleId = modules[0].module_id;\n            updatePageTitle();\n            fetchPrices();\n        }\n    } catch (e) {\n        document.getElementById('prices-container').innerHTML = \n            '<p class=\"text-red-500 text-center py-8\">B\u0142\u0105d \u0142adowania modu\u0142\u00f3w. Sprawd\u017a adres API.<\/p>';\n    }\n}\n\nfunction populateModuleSelect() {\n    const select = document.getElementById('moduleSelect');\n    select.innerHTML = '<option value=\"\">Wybierz modu\u0142<\/option>';\n    modules.forEach(m => {\n        const opt = document.createElement('option');\n        opt.value = m.module_id;\n        opt.textContent = m.module_name;\n        select.appendChild(opt);\n    });\n}\n\nasync function fetchPrices() {\n    const container = document.getElementById('prices-container');\n    if (!selectedModuleId) {\n        container.innerHTML = '<p class=\"text-gray-600 text-center py-8\">Wybierz modu\u0142...<\/p>';\n        return;\n    }\n    try {\n        const res = await fetch(`${API_BASE}\/prices\/module\/${selectedModuleId}`);\n        const result = await res.json();\n        displayPrices(result.data);\n    } catch (e) {\n        container.innerHTML = '<p class=\"text-red-500 text-center py-8\">B\u0142\u0105d \u0142adowania cennik\u00f3w.<\/p>';\n    }\n}\n\nasync function fetchPackageGroups() {\n    try {\n        const res = await fetch(`${API_BASE}\/prices\/package-groups`);\n        const result = await res.json();\n        packageGroups = result.data;\n        populatePackageGroupSelect();\n    } catch (e) {}\n}\n\nasync function fetchPackages() {\n    try {\n        const res = await fetch(`${API_BASE}\/prices\/packages`);\n        const result = await res.json();\n        const packages = Object.values(result.data).flat();\n        displayPackages(packages);\n    } catch (e) {\n        document.getElementById('packages-container').innerHTML = \n            '<p class=\"text-red-500 text-center py-8\">B\u0142\u0105d \u0142adowania pakiet\u00f3w.<\/p>';\n    }\n}\n\nfunction populatePackageGroupSelect() {\n    const select = document.getElementById('packageGroupSelect');\n    select.innerHTML = '<option value=\"\">Wszystkie grupy<\/option>';\n    packageGroups.forEach(g => {\n        const opt = document.createElement('option');\n        opt.value = g;\n        opt.textContent = g;\n        select.appendChild(opt);\n    });\n}\n\nfunction updatePageTitle() {\n    const mod = modules.find(m => m.module_id == selectedModuleId);\n    const title = mod ? `Cennik dla modu\u0142u: ${mod.module_name}` : 'Cennik';\n    document.getElementById('page-title').textContent = title;\n    document.title = title;\n}\n\n\/\/ ==================== WY\u015aWIETLANIE KART ====================\nfunction displayPrices(prices) {\n    const container = document.getElementById('prices-container');\n    container.innerHTML = '';\n    if (!prices || prices.length === 0) {\n        container.innerHTML = '<p class=\"text-gray-600 text-center py-8\">Brak cennik\u00f3w.<\/p>';\n        return;\n    }\n    prices.forEach(price => {\n        const discount = price.is_promotional && price.discount_value \n            ? `<p class=\"text-sm text-gray-600\">Zni\u017cka: ${price.discount_value}${price.discount_type}<\/p>` : '';\n        const priceHTML = showGrossPrice \n            ? `<p class=\"text-lg font-bold text-green-600\">Cena: ${price.gross_total} z\u0142<\/p>` \n            : `<p class=\"text-lg font-bold text-blue-600\">Cena: ${price.net_total} z\u0142<\/p>`;\n        const promo = price.is_promotional \n            ? `<div class=\"promotion-label\">PROMOCJA<\/div><img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1015\/600\/300\" class=\"promotion-image\" alt=\"Promocja\">` : '';\n        const best = price.bestseller ? `<div class=\"bestseller-label\">BESTSELLER<\/div>` : '';\n        const desc = (price.description && price.description.length) \n            ? `<ul class=\"description-list\">${price.description.map(d => `<li>${d||'-'}<\/li>`).join('')}<\/ul>` : '';\n        \n        container.innerHTML += `\n            <div class=\"price-card bg-white rounded-lg shadow-md p-6 ${price.is_promotional ? 'promotional' : ''} ${price.bestseller ? 'bestseller' : ''}\">\n                ${best}${promo}\n                <h3 class=\"text-xl font-semibold mb-2\">${price.name}<\/h3>\n                <p class=\"text-gray-600\">Modu\u0142: ${price.module_name || 'Brak'}<\/p>\n                ${priceHTML}\n                ${discount}\n                <p class=\"text-sm text-gray-600\">Okres: ${price.period_months} miesi\u0119cy<\/p>\n                ${desc}\n                <button onclick=\"handleBuy('${price.name}', ${price.net_total})\" \n                        class=\"mt-4 buy-button text-white px-4 py-2 rounded w-full font-semibold\">\n                    Kup teraz\n                <\/button>\n            <\/div>`;\n    });\n}\n\nfunction displayPackages(packages) {\n    const container = document.getElementById('packages-container');\n    container.innerHTML = '';\n    const filtered = selectedGroup ? packages.filter(p => p.package_group === selectedGroup) : packages;\n    if (filtered.length === 0) {\n        container.innerHTML = '<p class=\"text-gray-600 text-center py-8\">Brak pakiet\u00f3w.<\/p>';\n        return;\n    }\n    filtered.forEach(pkg => {\n        const discount = pkg.discount_value ? `<p class=\"text-sm text-gray-600\">Zni\u017cka: ${pkg.discount_value}${pkg.discount_type}<\/p>` : '';\n        const priceHTML = showGrossPackage \n            ? `<p class=\"text-lg font-bold text-green-600\">Cena: ${pkg.gross_total} z\u0142<\/p>` \n            : `<p class=\"text-lg font-bold text-blue-600\">Cena: ${pkg.net_total} z\u0142<\/p>`;\n        const items = (pkg.items && pkg.items.length) \n            ? pkg.items.map(i => `<li class=\"text-sm\">\u2022 ${i.name}<\/li>`).join('') \n            : '<li class=\"text-sm\">Brak element\u00f3w<\/li>';\n        const promo = pkg.promocy \n            ? `<div class=\"promotion-label\">PROMOCJA<\/div><img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1015\/600\/300\" class=\"promotion-image\" alt=\"Promocja\">` : '';\n        const best = pkg.bestseller ? `<div class=\"bestseller-label\">BESTSELLER<\/div>` : '';\n        const desc = (pkg.description && pkg.description.length) \n            ? `<ul class=\"description-list\">${pkg.description.map(d => `<li>${d||'-'}<\/li>`).join('')}<\/ul>` : '';\n        \n        container.innerHTML += `\n            <div class=\"package-card bg-white rounded-lg shadow-md p-6 ${pkg.promocy ? 'promotional' : ''} ${pkg.bestseller ? 'bestseller' : ''}\">\n                ${best}${promo}\n                <h3 class=\"text-xl font-semibold mb-2\">${pkg.name}<\/h3>\n                <p class=\"text-sm text-gray-600\">Grupa: ${pkg.package_group || 'Brak'}<\/p>\n                ${priceHTML}\n                ${discount}\n                ${desc}\n                <ul class=\"mt-4 mb-4\">${items}<\/ul>\n                <button onclick=\"handleBuy('${pkg.name}', ${pkg.net_total})\" \n                        class=\"mt-4 buy-button text-white px-4 py-2 rounded w-full font-semibold\">\n                    Kup pakiet\n                <\/button>\n            <\/div>`;\n    });\n}\n\n\/\/ ==================== OBS\u0141UGA KUPNA ====================\nfunction handleBuy(name, price) {\n    \/\/ \u2190\u2190\u2190 TUTAJ MO\u017bESZ DODA\u0106 PRZEKIEROWANIE DO KOSZYKA \/ FORMULARZA\n    alert(`Wybra\u0142e\u015b: ${name}\\nCena: ${price} z\u0142\\n\\n(W tym miejscu wstaw link do zam\u00f3wienia)`);\n    \/\/ Przyk\u0142ad: window.location.href = `\/zamow?produkt=${encodeURIComponent(name)}`;\n}\n\n\/\/ ==================== EVENTY ====================\ndocument.getElementById('priceToggle').addEventListener('change', e => {\n    showGrossPrice = e.target.checked;\n    fetchPrices();\n});\ndocument.getElementById('packageToggle').addEventListener('change', e => {\n    showGrossPackage = e.target.checked;\n    fetchPackages();\n});\ndocument.getElementById('packageGroupSelect').addEventListener('change', e => {\n    selectedGroup = e.target.value;\n    fetchPackages();\n});\ndocument.getElementById('moduleSelect').addEventListener('change', e => {\n    selectedModuleId = e.target.value;\n    updatePageTitle();\n    fetchPrices();\n});\n\n\/\/ ==================== START ====================\ndocument.addEventListener('DOMContentLoaded', () => {\n    fetchModules();\n    fetchPackageGroups();\n    fetchPackages();\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Cennik Cenniki Modu\u0142: Wybierz modu\u0142 Netto Brutto Pakiety Grupa pakiet\u00f3w: Wszystkie grupy Netto Brutto<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","_kad_post_transparent":"disable","_kad_post_title":"hide","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-37","page","type-page","status-publish","hentry"],"spectra_custom_meta":{"_edit_lock":["1776793507:1"],"_edit_last":["1"],"_uag_custom_page_level_css":[""],"_kad_post_transparent":["disable"],"_kad_post_title":["hide"],"_kad_post_layout":["default"],"_kad_post_sidebar_id":[""],"_kad_post_content_style":["unboxed"],"_kad_post_vertical_padding":[""],"_kad_post_feature":["hide"],"_kad_post_feature_position":[""],"_kad_post_header":[""],"_kad_post_footer":[""],"_kad_post_classname":[""],"footnotes":[""],"_uag_css_file_name":["uag-css-37.css"],"_uag_page_assets":["a:9:{s:3:\"css\";s:260:\".uag-blocks-common-selector{z-index:var(--z-index-desktop) !important}@media(max-width: 976px){.uag-blocks-common-selector{z-index:var(--z-index-tablet) !important}}@media(max-width: 767px){.uag-blocks-common-selector{z-index:var(--z-index-mobile) !important}}\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:8:{i:0;s:9:\"core\/html\";i:1;s:11:\"core\/search\";i:2;s:10:\"core\/group\";i:3;s:12:\"core\/heading\";i:4;s:17:\"core\/latest-posts\";i:5;s:20:\"core\/latest-comments\";i:6;s:13:\"core\/archives\";i:7;s:15:\"core\/categories\";}s:8:\"uag_flag\";b:0;s:11:\"uag_version\";s:10:\"1779191322\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/gabito.eu\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Cennik Cenniki Modu\u0142: Wybierz modu\u0142 Netto Brutto Pakiety Grupa pakiet\u00f3w: Wszystkie grupy Netto Brutto","_links":{"self":[{"href":"https:\/\/gabito.eu\/index.php?rest_route=\/wp\/v2\/pages\/37","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gabito.eu\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gabito.eu\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gabito.eu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gabito.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=37"}],"version-history":[{"count":4,"href":"https:\/\/gabito.eu\/index.php?rest_route=\/wp\/v2\/pages\/37\/revisions"}],"predecessor-version":[{"id":44,"href":"https:\/\/gabito.eu\/index.php?rest_route=\/wp\/v2\/pages\/37\/revisions\/44"}],"wp:attachment":[{"href":"https:\/\/gabito.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}