antv/thankcard-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: make style like main page

Browse Source
This commit is contained in:
antv
2026-07-07 11:21:21 +07:00
parent af529a4e81
commit 63764d0718
15 changed files with 385 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/action-panel.blade.php
+8 -9
View File
@@ -1,17 +1,16 @@
@props(['mode', 'user' => null])
<div class="form-footer flex space-x-2">
<div class="px-6 py-5 bg-gray-50/50 border-t border-gray-100 flex flex-col sm:flex-row justify-end gap-3 rounded-b-[24px]">
@if($mode === 'create')
<a href="{{ route('admin.users.index') }}" class="btn-secondary min-w-[120px] h-[45px]">Hủy bỏ</a>
<button type="submit" class="btn-primary min-w-[120px] h-[45px]">Tạo Nhân Viên</button>
<a href="{{ route('admin.users.index') }}" class="inline-flex items-center justify-center bg-white border border-[#d9dfe7] hover:bg-gray-50 text-[#1a2b49] font-bold py-2.5 px-6 rounded-xl text-sm transition-colors shadow-sm min-w-[120px] h-[45px]">Hủy bỏ</a>
<button type="submit" class="inline-flex items-center justify-center bg-[#3462f7] hover:bg-blue-700 text-white font-bold py-2.5 px-6 rounded-xl text-sm transition-colors shadow-md shadow-blue-500/10 min-w-[120px] h-[45px]">Tạo Nhân Viên</button>
@elseif($mode === 'edit')
<a href="{{ route('admin.users.index') }}" class="btn-secondary min-w-[120px] h-[45px]">Quay lại</a>
<button type="submit" class="btn-primary min-w-[120px] h-[45px]">Lưu Thay Đổi</button>
<a href="{{ route('admin.users.index') }}" class="inline-flex items-center justify-center bg-white border border-[#d9dfe7] hover:bg-gray-50 text-[#1a2b49] font-bold py-2.5 px-6 rounded-xl text-sm transition-colors shadow-sm min-w-[120px] h-[45px]">Quay lại</a>
<button type="submit" class="inline-flex items-center justify-center bg-[#3462f7] hover:bg-blue-700 text-white font-bold py-2.5 px-6 rounded-xl text-sm transition-colors shadow-md shadow-blue-500/10 min-w-[120px] h-[45px]">Lưu Thay Đổi</button>
@elseif($mode === 'delete')
<a href="{{ route('admin.users.index') }}" class="btn-secondary min-w-[120px] h-[45px]">Quay lại</a>
<button type="submit" class="btn-primary bg-red-600 hover:bg-red-700 min-w-[120px] h-[45px]">Nghỉ việc</button>
<a href="{{ route('admin.users.index') }}" class="inline-flex items-center justify-center bg-white border border-[#d9dfe7] hover:bg-gray-50 text-[#1a2b49] font-bold py-2.5 px-6 rounded-xl text-sm transition-colors shadow-sm min-w-[120px] h-[45px]">Quay lại</a>
<button type="submit" class="inline-flex items-center justify-center bg-red-600 hover:bg-red-700 text-white font-bold py-2.5 px-6 rounded-xl text-sm transition-colors shadow-md shadow-red-500/10 min-w-[120px] h-[45px]">Nghỉ việc</button>
@elseif($mode === 'self')
<a href="{{ route('user.dashboard') }}" class="btn-secondary min-w-[120px] h-[45px]">Quay lại</a>
<a href="{{ route('user.dashboard') }}" class="inline-flex items-center justify-center bg-white border border-[#d9dfe7] hover:bg-gray-50 text-[#1a2b49] font-bold py-2.5 px-6 rounded-xl text-sm transition-colors shadow-sm min-w-[120px] h-[45px]">Quay lại</a>
@endif
</div>
{{-- duplicated block removed --}}
resources/views/components/month-filter.blade.php
+2 -2
View File
@@ -7,6 +7,6 @@
@endphp
<form action="{{ $actionUrl }}" method="GET" class="flex items-center gap-2 flex-shrink-0">
<input type="month" name="month" value="{{ $selectedMonth }}" onchange="this.form.submit()" class="form-input !min-h-[45px] !py-0 !text-sm w-auto border-border-medium rounded bg-white">
<button type="submit" class="btn-primary !h-[45px] !px-4 text-sm rounded shadow-sm hover:translate-y-[-1px] sm:hidden">Lọc</button>
<input type="month" name="month" value="{{ $selectedMonth }}" onchange="this.form.submit()" class="w-full sm:w-auto h-[40px] px-4 bg-white border border-[#d9dfe7] rounded-xl outline-none text-text-dark text-sm placeholder-gray-400 focus:border-[#3462f7] focus:ring-2 focus:ring-blue-500/20 hover:border-gray-400 transition-all duration-200 shadow-sm">
<button type="submit" class="inline-flex items-center justify-center bg-[#3462f7] hover:bg-blue-700 text-white font-bold h-[40px] px-4 rounded-xl text-sm transition-colors shadow-md shadow-blue-500/10 sm:hidden">Lọc</button>
</form>
resources/views/components/transaction-history.blade.php
+16 -16
View File
@@ -1,8 +1,8 @@
@props(['mode', 'user', 'administrations', 'selectedMonth'])
<div class="bg-white rounded-xl shadow-sm border border-border-light overflow-hidden flex flex-col h-full">
<div class="px-6 py-4 sm:py-5 border-b border-border-light bg-gray-50/50 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
<h3 class="text-lg font-bold text-text-dark">
<div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] border border-white overflow-hidden flex flex-col h-full">
<div class="px-6 py-5 border-b border-gray-100 bg-white flex flex-col sm:flex-row sm:items-center justify-between gap-3">
<h3 class="text-[17px] font-extrabold text-[#1a2b49] leading-tight">
@if($mode === 'self')
Lịch sử nhận / gửi thẻ (Tháng {{ Carbon\Carbon::parse($selectedMonth)->format('m/Y') }})
@else
@@ -14,8 +14,8 @@
</div>
<div class="p-0 overflow-y-auto max-h-[600px]">
<table class="min-w-full divide-y divide-border-light text-sm">
<thead class="bg-gray-50/80 sticky top-0">
<table class="min-w-full divide-y divide-gray-100 text-sm">
<thead class="bg-gray-50/50 sticky top-0">
<tr>
<th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">Ngày</th>
<th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">
@@ -27,32 +27,32 @@
<th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">Số lượng</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-border-light">
<tbody class="bg-white divide-y divide-gray-100">
@forelse($administrations as $admin_record)
@php
$isReceiver = $admin_record->msnv == $user->msnv && $admin_record->received > 0;
@endphp
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-6 py-3 whitespace-nowrap text-text-medium font-medium">{{ Carbon\Carbon::parse($admin_record->date)->format('d/m/Y') }}</td>
<td class="px-6 py-3 whitespace-nowrap">
<tr class="hover:bg-slate-50/60 transition-colors">
<td class="px-6 py-3.5 whitespace-nowrap text-text-medium font-medium">{{ Carbon\Carbon::parse($admin_record->date)->format('d/m/Y') }}</td>
<td class="px-6 py-3.5 whitespace-nowrap">
@if($isReceiver)
<span class="px-2 py-1 inline-flex text-xs leading-5 font-bold rounded-full bg-green-100 text-green-800">
<span class="px-2.5 py-1 inline-flex text-[10px] leading-5 font-bold rounded-full bg-green-50 text-green-700 border border-green-100">
{{ $mode === 'self' ? 'Bạn đã nhận thẻ' : 'Nhận thẻ' }}
</span>
@else
<span class="px-2 py-1 inline-flex text-xs leading-5 font-bold rounded-full bg-blue-100 text-blue-800">
<span class="px-2.5 py-1 inline-flex text-[10px] leading-5 font-bold rounded-full bg-blue-50 text-blue-700 border border-blue-100">
{{ $mode === 'self' ? 'Bạn gửi tặng thẻ' : 'Gửi thẻ' }}
</span>
@endif
</td>
<td class="px-6 py-3 whitespace-nowrap font-bold text-text-dark">
<td class="px-6 py-3.5 whitespace-nowrap font-bold text-[#1a2b49]">
@if($isReceiver)
{{ $mode === 'self' ? 'Nhận từ: ' : 'Từ: ' }}<span class="text-primary">{{ $admin_record->sender }}</span>
{{ $mode === 'self' ? 'Nhận từ: ' : 'Từ: ' }}<span class="text-[#3462f7]">{{ $admin_record->sender }}</span>
@else
{{ $mode === 'self' ? 'Gửi cho: ' : 'Tới: ' }}<span class="text-primary">{{ $admin_record->receiver }}</span>
{{ $mode === 'self' ? 'Gửi cho: ' : 'Tới: ' }}<span class="text-[#3462f7]">{{ $admin_record->receiver }}</span>
@endif
</td>
<td class="px-6 py-3 whitespace-nowrap font-extrabold text-lg">
<td class="px-6 py-3.5 whitespace-nowrap font-extrabold text-base">
@if($isReceiver)
<span class="text-green-600">+{{ $admin_record->received }}</span>
@else
@@ -71,7 +71,7 @@
</table>
</div>
@if($administrations->hasPages())
<div class="px-6 py-4 border-t border-border-light bg-gray-50/30">
<div class="px-6 py-4 border-t border-gray-100 bg-white">
{{ $administrations->links() }}
</div>
@endif
resources/views/components/user-filter-form.blade.php
+9 -9
View File
@@ -1,28 +1,28 @@
@props(['action', 'search' => '', 'flagSend' => '', 'selectedMonth' => ''])
<form id="filterForm" action="{{ $action }}" method="GET" class="flex flex-col md:flex-row items-stretch md:items-center gap-3 w-full mb-6 bg-gray-50/50 p-4 rounded-xl border border-border-light">
<form id="filterForm" action="{{ $action }}" method="GET" class="flex flex-col md:flex-row items-stretch md:items-center gap-3.5 w-full mb-6 bg-white p-5 rounded-[24px] border border-white shadow-[0_10px_30px_rgba(15,23,42,0.05)]">
<div class="relative flex items-center flex-1 min-w-[200px]">
<input type="text" id="searchInput" name="search" value="{{ $search }}" placeholder="Tìm MSNV hoặc Email..." class="form-input !py-1.5 !text-sm !pl-10 !pr-10 w-full border-border-medium rounded bg-white">
<svg class="w-4 h-4 text-text-light absolute left-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="pointer-events: none;">
<input type="text" id="searchInput" name="search" value="{{ $search }}" placeholder="Tìm MSNV hoặc Email..." class="form-input !py-1.5 !text-sm !pl-10 !pr-10 w-full border-[#d9dfe7] rounded-xl bg-white">
<svg class="w-4 h-4 text-text-light absolute left-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="pointer-events: none;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<button type="button" id="btnClearSearch" class="{{ empty($search) ? 'hidden' : '' }} absolute right-3 text-text-light hover:text-text-dark focus:outline-none">
<button type="button" id="btnClearSearch" class="{{ empty($search) ? 'hidden' : '' }} absolute right-3.5 text-text-light hover:text-text-dark focus:outline-none">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<select name="flag_send" id="flagSendFilter" class="form-input !py-1.5 !text-sm w-full md:w-auto border-border-medium rounded bg-white min-w-[150px]">
<select name="flag_send" id="flagSendFilter" class="form-input !py-1.5 !text-sm w-full md:w-auto border-[#d9dfe7] rounded-xl bg-white min-w-[180px]">
<option value="" {{ is_null($flagSend) || $flagSend === '' ? 'selected' : '' }}>Quyền gửi: Tất cả</option>
<option value="1" {{ $flagSend === '1' ? 'selected' : '' }}>Được gửi</option>
<option value="0" {{ $flagSend === '0' ? 'selected' : '' }}>Không được gửi</option>
</select>
<input type="month" name="month" id="monthFilter" value="{{ $selectedMonth }}" class="form-input !py-1.5 !text-sm w-full md:w-auto border-border-medium rounded bg-white">
<input type="month" name="month" id="monthFilter" value="{{ $selectedMonth }}" class="form-input !py-1.5 !text-sm w-full md:w-auto border-[#d9dfe7] rounded-xl bg-white">
<div class="flex items-center gap-2 w-full md:w-auto">
<button type="submit" id="btnFilter" class="btn-primary !py-1.5 !px-4 text-sm rounded shadow-sm hover:translate-y-[-1px] flex items-center justify-center min-w-[70px] flex-1 md:flex-none">Tìm</button>
<button type="button" id="btnClearFilters" class="btn-secondary !py-1.5 !px-4 text-sm rounded border border-border-medium hover:bg-gray-100 flex items-center justify-center min-w-[100px] flex-1 md:flex-none">Xóa bộ lọc</button>
<div class="flex items-center gap-2 w-full md:w-auto shrink-0">
<button type="submit" id="btnFilter" class="btn-primary !py-2.5 !px-5 text-sm rounded-xl font-bold shadow-md shadow-blue-500/10 !bg-[#3462f7] hover:!bg-blue-700 flex items-center justify-center min-w-[80px] flex-1 md:flex-none">Tìm</button>
<button type="button" id="btnClearFilters" class="btn-secondary !py-2.5 !px-5 text-sm rounded-xl font-bold border border-[#d9dfe7] hover:bg-gray-100 flex items-center justify-center min-w-[100px] flex-1 md:flex-none">Xóa bộ lọc</button>
</div>
</form>
resources/views/components/user-form.blade.php
+69 -67
View File
@@ -20,32 +20,34 @@
};
@endphp
<div class="form-container flex flex-col h-full justify-between">
<div class="form-header">
<h3 class="form-header-title">
{{ match($mode) {
'create' => 'Thêm User Mới',
'edit' => 'Quản Lý Thẻ: ' . ($user?->msnv),
'delete' => 'Xác nhận nghỉ việc: ' . ($user?->msnv),
'self' => 'Thông tin cá nhân: ' . ($user?->msnv),
} }}
<div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] border border-white overflow-hidden flex flex-col justify-between">
<div class="bg-gradient-to-r from-blue-50/70 via-indigo-50/50 to-purple-50/30 px-6 py-6 sm:px-8 border-b border-gray-100">
<h3 class="text-[17px] font-extrabold text-[#1a2b49] leading-tight flex items-center gap-2">
<span>{{ match($mode) {
'create' => '👥 Thêm User Mới',
'edit' => '⚙️ Quản Lý Thẻ: ' . ($user?->msnv),
'delete' => '⚠️ Xác nhận nghỉ việc: ' . ($user?->msnv),
'self' => '👤 Thông tin cá nhân: ' . ($user?->msnv),
} }}</span>
</h3>
</div>
@if(!$isCreate && $user)
<div class="form-body pb-0">
<div class="mb-6 pb-6 border-b border-border-light space-y-3">
<div class="flex justify-between items-center text-sm">
<span class="text-text-medium font-bold">Email:</span>
<span class="font-semibold text-text-dark">{{ $user->mail }}</span>
<div class="p-6 sm:p-8 pb-0">
<div class="mb-2 p-5 rounded-2xl bg-gradient-to-br from-slate-50 to-gray-50 border border-gray-100 flex items-center gap-4 shadow-sm">
<div class="w-12 h-12 rounded-full bg-blue-50 text-[#3462f7] flex items-center justify-center font-extrabold text-lg shadow-inner flex-shrink-0">
{{ strtoupper(substr($user->name ?? $user->msnv, 0, 2)) }}
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-text-medium font-bold">Role:</span>
<span class="font-semibold text-text-dark">{{ $user->role == \App\Models\User::ROLE_ADMIN ? 'Admin' : 'Member' }}</span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-text-medium font-bold">Số dư thẻ:</span>
<span class="font-extrabold text-orange-500 text-xl">{{ $user->card }}</span>
<div class="flex-1 min-w-0">
<h4 class="font-extrabold text-[#1a2b49] text-base truncate">{{ $user->name }}</h4>
<p class="text-xs text-gray-500 font-medium truncate mb-1">{{ $user->mail }}</p>
<div class="flex items-center gap-2">
<span class="px-2 py-0.5 text-[10px] font-bold rounded-full bg-blue-50 text-blue-700 border border-blue-100">
{{ $user->role == \App\Models\User::ROLE_ADMIN ? 'Admin' : 'Member' }}
</span>
<span class="text-xs text-gray-300 font-semibold">•</span>
<span class="text-xs font-bold text-gray-600">Thẻ: <span class="text-orange-500 font-extrabold text-sm">{{ $user->card }}</span></span>
</div>
</div>
</div>
</div>
@@ -59,94 +61,94 @@
@endif
@endif
<div class="form-body {{ !$isCreate ? 'pt-0' : '' }}">
<div class="p-6 sm:p-8 {{ !$isCreate ? 'pt-0' : '' }} space-y-5">
@if($isCreate)
<div class="form-group">
<label class="form-label" for="msnv">Mã nhân viên (MSNV) <span class="text-red-500">*</span></label>
<div class="form-input-group">
<span class="form-input-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<div class="relative">
<label class="block text-[14px] font-bold text-[#1a2b49] mb-2" for="msnv">Mã nhân viên (MSNV) <span class="text-red-500">*</span></label>
<div class="relative flex items-center w-full">
<span class="absolute left-4 text-gray-400 pointer-events-none w-5 h-5 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5zm6-10.125a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zm1.294 6.336a6.721 6.721 0 01-3.17.789 6.721 6.721 0 01-3.168-.789 3.376 3.376 0 016.338 0z" />
</svg>
</span>
<input type="number" name="msnv" id="msnv" class="form-input form-input-with-icon bg-white" required value="{{ old('msnv') }}" placeholder="VD: 1001">
<input type="number" name="msnv" id="msnv" class="form-input form-input-with-icon !rounded-xl !focus:border-[#3462f7] !focus:ring-[#3462f7]/20" style="padding-left: 48px;" required value="{{ old('msnv') }}" placeholder="VD: 1001">
</div>
@error('msnv')<span class="error-text">{{ $message }}</span>@enderror
@error('msnv')<span class="text-red-500 text-[13px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
</div>
<div class="form-group">
<label class="form-label" for="name">Họ và tên <span class="text-red-500">*</span></label>
<div class="form-input-group">
<span class="form-input-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<div class="relative">
<label class="block text-[14px] font-bold text-[#1a2b49] mb-2" for="name">Họ và tên <span class="text-red-500">*</span></label>
<div class="relative flex items-center w-full">
<span class="absolute left-4 text-gray-400 pointer-events-none w-5 h-5 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
</svg>
</span>
<input type="text" name="name" id="name" class="form-input form-input-with-icon bg-white" required value="{{ old('name') }}" placeholder="VD: Nguyễn Văn A">
<input type="text" name="name" id="name" class="form-input form-input-with-icon !rounded-xl !focus:border-[#3462f7] !focus:ring-[#3462f7]/20" style="padding-left: 48px;" required value="{{ old('name') }}" placeholder="VD: Nguyễn Văn A">
</div>
@error('name')<span class="error-text">{{ $message }}</span>@enderror
@error('name')<span class="text-red-500 text-[13px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
</div>
<div class="form-group">
<label class="form-label" for="mail">Email <span class="text-red-500">*</span></label>
<div class="form-input-group">
<span class="form-input-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<div class="relative">
<label class="block text-[14px] font-bold text-[#1a2b49] mb-2" for="mail">Email <span class="text-red-500">*</span></label>
<div class="relative flex items-center w-full">
<span class="absolute left-4 text-gray-400 pointer-events-none w-5 h-5 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
</span>
<input type="email" name="mail" id="mail" class="form-input form-input-with-icon bg-white" required value="{{ old('mail') }}" placeholder="VD: nguyenvana@runsystem.net">
<input type="email" name="mail" id="mail" class="form-input form-input-with-icon !rounded-xl !focus:border-[#3462f7] !focus:ring-[#3462f7]/20" style="padding-left: 48px;" required value="{{ old('mail') }}" placeholder="VD: nguyenvana@runsystem.net">
</div>
@error('mail')<span class="error-text">{{ $message }}</span>@enderror
@error('mail')<span class="text-red-500 text-[13px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
</div>
<div class="form-group">
<label class="form-label" for="departments">Phòng ban <span class="text-red-500">*</span></label>
<select name="departments" id="departments" class="form-input bg-white" required>
<div class="relative">
<label class="block text-[14px] font-bold text-[#1a2b49] mb-2" for="departments">Phòng ban <span class="text-red-500">*</span></label>
<select name="departments" id="departments" class="form-input !rounded-xl !focus:border-[#3462f7] !focus:ring-[#3462f7]/20" required>
<option value="1" {{ old('departments') == '1' ? 'selected' : '' }}>Phòng Phát Triển (Dev)</option>
<option value="2" {{ old('departments') == '2' ? 'selected' : '' }}>Phòng Nhân Sự (HR)</option>
<option value="3" {{ old('departments') == '3' ? 'selected' : '' }}>Phòng Kinh Doanh (Sale)</option>
<option value="4" {{ old('departments') == '4' ? 'selected' : '' }}>Ban Giám Đốc (Board)</option>
<option value="5" {{ old('departments') == '5' ? 'selected' : '' }}>Phòng Marketing</option>
</select>
@error('departments')<span class="error-text">{{ $message }}</span>@enderror
@error('departments')<span class="text-red-500 text-[13px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
</div>
<div class="form-group">
<label class="form-label" for="password">Mật khẩu khởi tạo <span class="text-red-500">*</span></label>
<div class="form-input-group">
<span class="form-input-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<div class="relative">
<label class="block text-[14px] font-bold text-[#1a2b49] mb-2" for="password">Mật khẩu khởi tạo <span class="text-red-500">*</span></label>
<div class="relative flex items-center w-full">
<span class="absolute left-4 text-gray-400 pointer-events-none w-5 h-5 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0V10.5m-2.812 10.5h14.625c.621 0 1.125-.504 1.125-1.125V11.25c0-.621-.504-1.125-1.125-1.125H3.75c-.621 0-1.125.504-1.125 1.125v7.875c0 .621.504 1.125 1.125 1.125z" />
</svg>
</span>
<input type="text" name="password" id="password" class="form-input form-input-with-icon bg-gray-50" readonly required value="1234@Dcba">
<input type="text" name="password" id="password" class="form-input form-input-with-icon !rounded-xl !bg-gray-50 !text-gray-500 cursor-not-allowed" style="padding-left: 48px;" readonly required value="1234@Dcba">
</div>
<span class="helper-text">Mật khẩu mặc định cho tất cả user mới tạo.</span>
@error('password')<span class="error-text">{{ $message }}</span>@enderror
<span class="text-[13px] text-gray-400 mt-2 block">Mật khẩu mặc định cho tất cả user mới tạo.</span>
@error('password')<span class="text-red-500 text-[13px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
</div>
<div class="form-group mb-0">
<label class="form-label" for="role">Quyền hạn <span class="text-red-500">*</span></label>
<select name="role" id="role" class="form-input bg-white" required>
<div class="relative">
<label class="block text-[14px] font-bold text-[#1a2b49] mb-2" for="role">Quyền hạn <span class="text-red-500">*</span></label>
<select name="role" id="role" class="form-input !rounded-xl !focus:border-[#3462f7] !focus:ring-[#3462f7]/20" required>
<option value="{{ \App\Models\User::ROLE_MEMBER }}" {{ old('role') == \App\Models\User::ROLE_MEMBER ? 'selected' : '' }}>Nhân viên (Member)</option>
<option value="{{ \App\Models\User::ROLE_ADMIN }}" {{ old('role') == \App\Models\User::ROLE_ADMIN ? 'selected' : '' }}>Quản trị viên (Admin)</option>
</select>
@error('role')<span class="error-text">{{ $message }}</span>@enderror
@error('role')<span class="text-red-500 text-[13px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
</div>
@endif
@if($isEdit && $user)
<div class="form-group">
<label class="form-label" for="num_card">Nạp thêm thẻ</label>
<input type="number" name="num_card" id="num_card" min="1" class="form-input bg-white" placeholder="Nhập số lượng thẻ muốn nạp...">
@error('num_card')<span class="error-text">{{ $message }}</span>@enderror
<div class="relative">
<label class="block text-[14px] font-bold text-[#1a2b49] mb-2" for="num_card">Nạp thêm thẻ</label>
<input type="number" name="num_card" id="num_card" min="1" class="form-input !rounded-xl !focus:border-[#3462f7] !focus:ring-[#3462f7]/20" placeholder="Nhập số lượng thẻ muốn nạp...">
@error('num_card')<span class="text-red-500 text-[13px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
</div>
<div class="form-group mb-0">
<label class="flex items-center gap-3 cursor-pointer p-4 border border-[#d9dfe7] rounded-lg hover:bg-gray-50 hover:border-gray-400 transition-colors shadow-sm bg-white">
<input type="checkbox" name="flag_send" id="flag_send" value="1" class="form-input !w-5 !h-5 !min-h-0" {{ $user->flag_send ? 'checked' : '' }}>
<span class="text-[14px] font-[600] text-text-dark">Bật quyền cho phép User gửi thẻ</span>
<div class="relative pt-2">
<label class="flex items-center gap-3.5 cursor-pointer p-4 border border-[#e2e8f0] rounded-xl hover:bg-slate-50 hover:border-gray-300 transition-all shadow-sm bg-white">
<input type="checkbox" name="flag_send" id="flag_send" value="1" class="w-5 h-5 text-[#3462f7] border-[#d9dfe7] rounded-lg focus:ring-[#3462f7] focus:ring-2 cursor-pointer transition-colors" {{ $user->flag_send ? 'checked' : '' }}>
<span class="text-[14px] font-bold text-[#1a2b49]">Cho phép nhân viên gửi thẻ</span>
</label>
</div>
@endif