diff --git a/resources/views/user/send.blade.php b/resources/views/user/send.blade.php index 997efb6..362325a 100644 --- a/resources/views/user/send.blade.php +++ b/resources/views/user/send.blade.php @@ -77,7 +77,7 @@ $tpls = [ {{-- To: Người nhận --}}
- + @@ -121,25 +121,25 @@ $tpls = [
-{{-- Info note --}} -
+ +
- +
-

Lưu ý

+

Lưu ý

Chỉ được gửi tối đa {{ App\Models\Administration::MAX_SEND_CARD_PER_MONTH }} thẻ cho cùng một người trong tháng để đảm bảo tính công bằng.

{{-- Actions --}}
- - Hủy bỏ - - + + Hủy bỏ + +
@@ -186,6 +186,9 @@ document.addEventListener('DOMContentLoaded', function() { footerBorder:'#DDD6FE'}, }; + // Current selected template ID (defaults to 1) // read from hidden input or localStorage + let currentTpl = parseInt(localStorage.getItem('selectedTemplate')) || parseInt(document.getElementById('template_id').value) || 1; + function applyTheme(id) { const t = T[id]; if (!t) return; const $card = document.getElementById('eCard'); @@ -215,23 +218,85 @@ document.addEventListener('DOMContentLoaded', function() { $badge.style.background = t.badgeBg; $badge.style.color = t.accent; $footerL.style.borderColor = t.footerBorder; + // sync primary submit button color + const $submit = document.getElementById('btnSubmitSend'); + if ($submit) { + $submit.style.background = t.accent; + $submit.style.borderColor = t.accent; + } + // sync info note colors + const $info = document.getElementById('infoNote'); + if ($info) { + $info.style.borderColor = t.accent; + } + const $noteIcon = document.getElementById('noteIcon'); + if ($noteIcon) { + $noteIcon.style.stroke = t.accent; + $noteIcon.style.color = t.accent; + } + const $noteHeader = document.getElementById('noteHeader'); + if ($noteHeader) { + $noteHeader.style.color = t.accent; + } + // store current template for modal sync + currentTpl = id; } - // ── Template picker ────────────────────────────────────────────── - window.selectTpl = function(el, id) { - document.querySelectorAll('.tpl-btn').forEach(b => { + // ── Template picker ────────────────────────────────────────────── + window.selectTpl = function(el, id, e) { + if (e) e.preventDefault(); + document.querySelectorAll('.tpl-btn').forEach(b => { + b.classList.remove('border-[#3462f7]','ring-2','ring-[#3462f7]/20','shadow-md'); + b.classList.add('border-[#e8edf4]'); + b.querySelector('.tpl-check').classList.replace('opacity-100','opacity-0'); + }); + el.classList.remove('border-[#e8edf4]'); + el.classList.add('border-[#3462f7]','ring-2','ring-[#3462f7]/20','shadow-md'); + el.querySelector('.tpl-check').classList.replace('opacity-0','opacity-100'); + document.getElementById('template_id').value = id; + // persist selection + localStorage.setItem('selectedTemplate', id); + applyTheme(id); + }; + + // Restore saved selections on load + const savedReceiver = localStorage.getItem('selectedReceiver'); + if (savedReceiver) document.getElementById('receiver').value = savedReceiver; + const savedAmount = localStorage.getItem('selectedAmount'); + if (savedAmount) document.getElementById('amount').value = savedAmount; + + // Listen for changes to persist them + document.getElementById('receiver').addEventListener('change', function(){ + localStorage.setItem('selectedReceiver', this.value); + }); + document.getElementById('amount').addEventListener('change', function(){ + localStorage.setItem('selectedAmount', this.value); + }); + + // Apply saved template on initial load + applyTheme(currentTpl); + document.getElementById('template_id').value = currentTpl; + // Sync template button UI + document.querySelectorAll('.tpl-btn').forEach(b => { + const id = parseInt(b.getAttribute('data-tpl')); + if (id === currentTpl) { + b.classList.remove('border-[#e8edf4]'); + b.classList.add('border-[#3462f7]','ring-2','ring-[#3462f7]/20','shadow-md'); + const check = b.querySelector('.tpl-check'); + if (check) { + check.classList.remove('opacity-0'); + check.classList.add('opacity-100'); + } + } else { b.classList.remove('border-[#3462f7]','ring-2','ring-[#3462f7]/20','shadow-md'); b.classList.add('border-[#e8edf4]'); - b.querySelector('.tpl-check').classList.replace('opacity-100','opacity-0'); - }); - el.classList.remove('border-[#e8edf4]'); - el.classList.add('border-[#3462f7]','ring-2','ring-[#3462f7]/20','shadow-md'); - el.querySelector('.tpl-check').classList.replace('opacity-0','opacity-100'); - document.getElementById('template_id').value = id; - applyTheme(id); - }; - - applyTheme(1); + const check = b.querySelector('.tpl-check'); + if (check) { + check.classList.remove('opacity-100'); + check.classList.add('opacity-0'); + } + } + }); // ── TomSelect ──────────────────────────────────────────────────── new TomSelect('#receiver', { @@ -263,7 +328,9 @@ document.addEventListener('DOMContentLoaded', function() { $mMsg.innerHTML = msg.replace(/\n/g,'
'); if (confirm) { $mTitle.className = 'text-lg font-bold text-primary'; - $mAct.innerHTML = ` + // Use accent color of current template for confirm button background + const accent = T[currentTpl].accent; + $mAct.innerHTML = ` `; document.getElementById('btnCancel').onclick = () => window.closeModal('customModal'); document.getElementById('btnOk').addEventListener('click', function(){