m

resources/views/user/send.blade.php

@@ -77,7 +77,7 @@ $tpls = [
 
     {{-- To: Người nhận --}}
     <div class="mb-6">
-      <label class="block text-[11px] font-bold uppercase tracking-widest mb-2" id="labelTo" style="color:#B8860B;">✉ Gửi đến</label>
+      <label class="block text-[11px] font-bold uppercase tracking-widest mb-2" id="labelTo" style="color:#B8860B;">Gửi đến</label>
       <select name="receiver" id="receiver" class="form-input rounded-xl border-[#e8edf4] bg-white/90" required>
         <option value="" disabled selected></option>
         @foreach($users as $u)
@@ -89,7 +89,7 @@ $tpls = [
 
     {{-- Số lượng --}}
     <div class="mb-6">
-      <label class="block text-[11px] font-bold uppercase tracking-widest mb-2" id="labelQty" style="color:#B8860B;">🎴 Số lượng thẻ</label>
+      <label class="block text-[11px] font-bold uppercase tracking-widest mb-2" id="labelQty" style="color:#B8860B;">Số lượng thẻ</label>
       <div class="flex items-center gap-3">
         <select name="amount" id="amount" class="form-input rounded-xl border-[#e8edf4] bg-white/90 !w-auto !px-5" required>
           <option value="1">1 Thẻ</option>
@@ -121,23 +121,23 @@ $tpls = [
   </div>
 </div>
 
-{{-- Info note --}}
+<!-- Info note with dynamic accent -->
-<div class="flex items-start gap-3 bg-gradient-to-r from-[#eff4ff] to-[#f5f0ff] p-4 rounded-2xl border border-[#dce7ff] mb-5">
+<div id="infoNote" class="flex items-start gap-3 bg-gradient-to-r from-[#eff4ff] to-[#f5f0ff] p-4 rounded-2xl border mb-5" style="border-color:#dce7ff;">
   <div class="w-8 h-8 rounded-xl bg-white flex items-center justify-center shrink-0 shadow-sm">
-    <svg class="w-4 h-4 text-[#3462f7]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+    <svg id="noteIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
   </div>
   <div>
-    <p class="text-[12px] font-bold text-[#3462f7] mb-0.5">Lưu ý</p>
+    <p id="noteHeader" class="text-[12px] font-bold mb-0.5" style="color:#3462f7;">Lưu ý</p>
     <p class="text-[13px] text-gray-600 font-medium leading-relaxed">Chỉ được gửi tối đa <strong>{{ App\Models\Administration::MAX_SEND_CARD_PER_MONTH }} thẻ</strong> cho cùng một người trong tháng để đảm bảo tính công bằng.</p>
   </div>
 </div>
 
 {{-- Actions --}}
 <div class="flex flex-col sm:flex-row justify-end gap-3">
-  <a href="{{ route('user.dashboard') }}" class="btn-secondary rounded-xl font-bold flex items-center justify-center gap-2 order-2 sm:order-1">
+    <a href="{{ route('user.dashboard') }}" id="btnCancelLink" class="btn-secondary rounded-xl font-bold flex items-center justify-center gap-2 order-2 sm:order-1">
       <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>Hủy bỏ
     </a>
-  <button type="button" id="btnSubmitSend" class="btn-primary rounded-xl font-bold !bg-[#3462f7] hover:!bg-blue-700 shadow-md shadow-blue-500/15 flex items-center justify-center gap-2 order-1 sm:order-2">
+    <button type="button" id="btnSubmitSend" class="btn-primary rounded-xl font-bold hover:!bg-blue-700 shadow-md shadow-blue-500/15 flex items-center justify-center gap-2 order-1 sm:order-2">
       <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg>Gửi Card
     </button>
 </div>
@@ -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,10 +218,33 @@ 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) {
+    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]');
@@ -228,10 +254,49 @@ document.addEventListener('DOMContentLoaded', function() {
         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);
     };
 
-  applyTheme(1);
+    // 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]');
+      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,'<br>');
     if (confirm) {
       $mTitle.className = 'text-lg font-bold text-primary';
-      $mAct.innerHTML = `<button id="btnOk" class="w-full sm:w-auto btn-primary !px-6 rounded-xl font-bold">Xác nhận gửi</button>
+      // Use accent color of current template for confirm button background
+      const accent = T[currentTpl].accent;
+      $mAct.innerHTML = `<button id="btnOk" class="w-full sm:w-auto btn-primary !px-6 rounded-xl font-bold" style="background:${accent};border-color:${accent};">Xác nhận gửi</button>
         <button id="btnCancel" class="w-full sm:w-auto btn-secondary !px-6 rounded-xl font-bold">Hủy</button>`;
       document.getElementById('btnCancel').onclick = () => window.closeModal('customModal');
       document.getElementById('btnOk').addEventListener('click', function(){