m
This commit is contained in:
antv
@@ -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 --}}
|
||||
<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">
|
||||
<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(){
|
||||
|
||||
Reference in New Issue
Block a user