wylaczenie sposob platnosci i porpawki ux

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;
+                }
+            }
+        });
+    }
+})();