feature: make style like main page
This commit is contained in:
antv
@@ -2,57 +2,78 @@
|
||||
@section('title', 'Gửi Thank Card')
|
||||
|
||||
@section('content')
|
||||
<div class="form-container">
|
||||
<div class="form-header">
|
||||
<h3 class="form-header-title">Gửi Thank Card Tới Đồng Nghiệp</h3>
|
||||
</div>
|
||||
|
||||
<form id="sendCardForm">
|
||||
@csrf
|
||||
<div class="max-w-[640px] mx-auto w-full pb-10">
|
||||
<div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] border border-white overflow-hidden">
|
||||
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="receiver">Chọn người nhận <span class="text-red-500">*</span></label>
|
||||
<select name="receiver" id="receiver" class="form-input" required>
|
||||
<option value="" disabled selected>-- Chọn đồng nghiệp --</option>
|
||||
@foreach($users as $u)
|
||||
<option value="{{ $u->msnv }}">{{ $u->msnv }} ({{ $u->mail }})</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<div class="bg-gradient-to-r from-[#eff4ff] to-[#faeffa] px-8 py-8 flex flex-col relative overflow-hidden">
|
||||
<div class="absolute -top-10 -right-10 w-32 h-32 bg-white/30 rounded-full blur-xl"></div>
|
||||
<div class="absolute -bottom-10 -left-10 w-24 h-24 bg-white/20 rounded-full blur-lg"></div>
|
||||
|
||||
<div class="relative z-10 flex items-center gap-3">
|
||||
<h3 class="text-[22px] font-extrabold text-[#1a2b49] tracking-tight">Gửi Thank Card</h3>
|
||||
<span class="text-xl animate-pulse">💌</span>
|
||||
</div>
|
||||
<p class="text-[13px] text-gray-500 font-medium mt-1.5 relative z-10">
|
||||
Gửi gắm lời cảm ơn chân thành đến người đồng nghiệp tuyệt vời của bạn!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form id="sendCardForm">
|
||||
@csrf
|
||||
|
||||
<div class="p-8 space-y-6">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-[14px] font-bold text-text-dark" for="receiver">
|
||||
Chọn người nhận <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<select name="receiver" id="receiver" class="form-input rounded-xl border-[#d9dfe7]" required>
|
||||
<option value="" disabled selected>-- Chọn đồng nghiệp --</option>
|
||||
@foreach($users as $u)
|
||||
<option value="{{ $u->msnv }}">{{ $u->name }} - {{ $u->msnv }} ({{ $u->mail }})</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-[14px] font-bold text-text-dark" for="amount">
|
||||
Số lượng thẻ <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<select name="amount" id="amount" class="form-input rounded-xl border-[#d9dfe7]" required>
|
||||
<option value="1">1 Thẻ</option>
|
||||
<option value="2">2 Thẻ</option>
|
||||
<option value="3">3 Thẻ</option>
|
||||
<option value="4">4 Thẻ</option>
|
||||
<option value="{{ \App\Models\Administration::MAX_SEND_CARD_PER_MONTH }}">{{ \App\Models\Administration::MAX_SEND_CARD_PER_MONTH }} Thẻ (Tối đa)</option>
|
||||
</select>
|
||||
<div class="mt-1 flex items-start gap-2 bg-[#eff4ff] p-3.5 rounded-xl border border-blue-50">
|
||||
<svg class="w-5 h-5 text-[#3462f7] shrink-0 mt-0.5" 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>
|
||||
<p class="text-[12px] text-gray-600 font-medium leading-relaxed">
|
||||
Lưu ý: Chỉ được gửi tối đa {{ \App\Models\Administration::MAX_SEND_CARD_PER_MONTH }} thẻ cho cùng 1 người trong 1 tháng để đảm bảo tính công bằng.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="amount">Số lượng thẻ <span class="text-red-500">*</span></label>
|
||||
<select name="amount" id="amount" class="form-input" required>
|
||||
<option value="1">1 Thẻ</option>
|
||||
<option value="2">2 Thẻ</option>
|
||||
<option value="3">3 Thẻ</option>
|
||||
<option value="4">4 Thẻ</option>
|
||||
<option value="{{ \App\Models\Administration::MAX_SEND_CARD_PER_MONTH }}">{{ \App\Models\Administration::MAX_SEND_CARD_PER_MONTH }} Thẻ (Tối đa)</option>
|
||||
</select>
|
||||
<p class="helper-text">Lưu ý: Chỉ được gửi tối đa {{ \App\Models\Administration::MAX_SEND_CARD_PER_MONTH }} thẻ cho cùng 1 người trong 1 tháng.</p>
|
||||
<div class="px-8 py-5 border-t border-[#d9dfe7]/50 bg-gray-50/50 flex flex-col sm:flex-row justify-end gap-3">
|
||||
<a href="{{ route('user.dashboard') }}" class="btn-secondary rounded-xl font-bold">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/10">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 mr-2">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<a href="{{ route('user.dashboard') }}" class="btn-secondary">Hủy bỏ</a>
|
||||
<button type="button" id="btnSubmitSend" class="btn-primary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 mr-2">
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Popup Modal -->
|
||||
<x-modal id="customModal" title="Thông báo" maxWidth="md">
|
||||
<p id="modalMessage" class="text-sm text-gray-600 leading-relaxed"></p>
|
||||
|
||||
<x-slot name="footer">
|
||||
<div id="modalActions" class="w-full flex flex-col sm:flex-row-reverse gap-3">
|
||||
<!-- Buttons injected by JS -->
|
||||
</div>
|
||||
</x-slot>
|
||||
</x-modal>
|
||||
@@ -75,8 +96,8 @@
|
||||
if(isConfirm) {
|
||||
modalTitle.className = "text-lg font-bold text-primary";
|
||||
modalActions.innerHTML = `
|
||||
<button id="btnConfirmOk" class="w-full sm:w-auto btn-primary !px-6 shadow-sm">Xác nhận gửi</button>
|
||||
<button id="btnCancel" class="w-full sm:w-auto btn-secondary !px-6 shadow-sm">Hủy</button>
|
||||
<button id="btnConfirmOk" class="w-full sm:w-auto btn-primary !px-6 shadow-sm rounded-xl font-bold">Xác nhận gửi</button>
|
||||
<button id="btnCancel" class="w-full sm:w-auto btn-secondary !px-6 shadow-sm rounded-xl font-bold">Hủy</button>
|
||||
`;
|
||||
document.getElementById('btnCancel').addEventListener('click', () => window.closeModal('customModal'));
|
||||
document.getElementById('btnConfirmOk').addEventListener('click', function() {
|
||||
@@ -87,7 +108,7 @@
|
||||
} else {
|
||||
modalTitle.className = "text-lg font-bold text-red-600";
|
||||
modalActions.innerHTML = `
|
||||
<button id="btnOkOnly" class="w-full sm:w-auto btn-secondary !px-6 shadow-sm">Đóng</button>
|
||||
<button id="btnOkOnly" class="w-full sm:w-auto btn-secondary !px-6 shadow-sm rounded-xl font-bold">Đóng</button>
|
||||
`;
|
||||
document.getElementById('btnOkOnly').addEventListener('click', () => window.closeModal('customModal'));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user