m

2026-07-14 17:04:29 +07:00
parent 05605ed1eb
commit ce6c4d2cf3
1 changed files with 93 additions and 26 deletions
@@ -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,25 +121,25 @@ $tpls = [
  </div>
 </div>

-{{-- Info note --}}
-<div class="flex items-start gap-3 bg-gradient-to-r from-[#eff4ff] to-[#f5f0ff] p-4 rounded-2xl border border-[#dce7ff] mb-5">
+<!-- Info note with dynamic accent -->
+<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">
-    <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">
-    <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>
+    <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 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>

 </form>
@@ -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,'<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(){