wylaczenie sposob platnosci i porpawki ux

static/css/custom.css

@@ -391,34 +391,50 @@ select.form-select:focus {
 
 /* Tylko ten przycisk */
 .btn.btn-outline-light.btn-opis {
-  color: #fff;
-  background-color: transparent;
-  border: 1px solid var(--border);
-  transition: none;
+    color: #fff;
+    background-color: transparent;
+    border: 1px solid var(--border);
+    transition: none;
 }
 
 .btn.btn-outline-light.btn-opis:hover,
 .btn.btn-outline-light.btn-opis:focus {
-  color: #fff;
-  background-color: #161616;
-  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
+    color: #fff;
+    background-color: #161616;
+    border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
 }
 
 .btn.btn-outline-light {
-  color: #fff;
-  background-color: transparent;
-  border: 1px solid rgba(255,255,255,0.9);
+    color: #fff;
+    background-color: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.9);
 }
 
 .btn.btn-outline-light:hover,
 .btn.btn-outline-light:focus {
-  color: #fff;
-  background-color: #161616;
-  border-color: color-mix(in srgb, var(--accent) 20%, #ffffff);
+    color: #fff;
+    background-color: #161616;
+    border-color: color-mix(in srgb, var(--accent) 20%, #ffffff);
 }
 
 .btn.btn-outline-light:active {
-  color: #fff;
-  background-color: #141414;
-  border-color: color-mix(in srgb, var(--accent) 24%, #ffffff);
+    color: #fff;
+    background-color: #141414;
+    border-color: color-mix(in srgb, var(--accent) 24%, #ffffff);
 }
+
+#kanalyWarning,
+#postepyWarning {
+    border: 1px solid #ffc107;
+    background-color: #2c2c2c;
+    color: #fff;
+}
+
+input:disabled,
+textarea:disabled,
+select:disabled {
+    background-color: #2b2b2b !important;
+    color: #bbb !important;
+    opacity: 1 !important;
+    cursor: not-allowed;
+}

static/js/sposoby_wplat.js

@@ -0,0 +1,88 @@
+(function () {
+    const form = document.getElementById('form-edit-zbiorka') || document.getElementById('form-add-zbiorka') || document.querySelector('form');
+
+    const map = [
+        ['uzyj_konta', 'numer_konta'],
+        ['uzyj_blik', 'numer_telefonu_blik']
+    ];
+
+    const warnBox = document.getElementById('kanalyWarning');
+
+    function showWarn(show) {
+        if (!warnBox) return;
+        warnBox.classList.toggle('d-none', !show);
+    }
+
+    function getEl(id) { return document.getElementById(id); }
+
+    function toggleField(chkId, inputId) {
+        const chk = getEl(chkId);
+        const inp = getEl(inputId);
+        if (!inp || !chk) return;
+        const on = chk.checked;
+        inp.disabled = !on;
+        if (on) inp.setAttribute('required', '');
+        else inp.removeAttribute('required');
+    }
+
+    function atLeastOneOn() {
+        return map.some(([c]) => getEl(c)?.checked);
+    }
+
+    function blinkInvalid(el) {
+        if (!el) return;
+        el.classList.add('is-invalid');
+        setTimeout(() => el.classList.remove('is-invalid'), 400);
+    }
+
+    function preventUncheckLast(e) {
+        const target = e.target;
+        if (target.checked) return;
+        const after = map.map(([c]) => c === target.id ? false : !!getEl(c)?.checked);
+        if (!after.some(Boolean)) {
+            e.preventDefault();
+            target.checked = true;
+            showWarn(true);
+            blinkInvalid(target);
+        } else {
+            showWarn(false);
+        }
+    }
+
+    function onToggle(chkId, inputId) {
+        toggleField(chkId, inputId);
+        showWarn(!atLeastOneOn());
+    }
+
+    map.forEach(([chkId, inputId]) => {
+        const chk = getEl(chkId);
+        if (!chk) return;
+        chk.addEventListener('click', preventUncheckLast);
+        chk.addEventListener('change', () => onToggle(chkId, inputId));
+        toggleField(chkId, inputId);
+    });
+    showWarn(!atLeastOneOn());
+
+    if (form) {
+        form.addEventListener('submit', function (e) {
+            if (!atLeastOneOn()) {
+                e.preventDefault();
+                showWarn(true);
+                blinkInvalid(getEl('uzyj_konta') || getEl('uzyj_blik'));
+                (getEl('uzyj_konta') || getEl('uzyj_blik'))?.focus();
+                return;
+            }
+
+            for (const [chkId, inputId] of map) {
+                const chk = getEl(chkId), inp = getEl(inputId);
+                if (chk?.checked && inp && !inp.value.trim()) {
+                    e.preventDefault();
+                    showWarn(true);
+                    blinkInvalid(inp);
+                    inp.focus();
+                    return;
+                }
+            }
+        });
+    }
+})();