antv
258 lines
19 KiB
PHP
258 lines
19 KiB
PHP
@props(['mode', 'user' => null])
|
|
|
|
@php
|
|
$isCreate = $mode === 'create';
|
|
$isEdit = $mode === 'edit';
|
|
$isDelete = $mode === 'delete';
|
|
$isSelf = $mode === 'self';
|
|
|
|
$actionUrl = match($mode) {
|
|
'create' => route('admin.users.store'),
|
|
'edit' => route('admin.users.update', $user?->msnv),
|
|
'delete' => route('admin.users.destroy', $user?->msnv),
|
|
'self' => route('user.update_profile'),
|
|
default => null,
|
|
};
|
|
|
|
$method = match($mode) {
|
|
'edit' => 'PUT',
|
|
'delete' => 'DELETE',
|
|
default => 'POST',
|
|
};
|
|
@endphp
|
|
|
|
<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 && !$isEdit)
|
|
<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-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 == config('constants.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>
|
|
@endif
|
|
|
|
@if($actionUrl)
|
|
<form action="{{ $actionUrl }}" method="POST" class="flex flex-col flex-1 justify-between">
|
|
@csrf
|
|
@if($method !== 'POST')
|
|
@method($method)
|
|
@endif
|
|
@endif
|
|
|
|
<div class="p-6 sm:p-8 {{ !$isCreate && !$isEdit ? 'pt-0' : '' }} space-y-5">
|
|
@if($isCreate)
|
|
<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 !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="text-red-500 text-[13px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
|
|
</div>
|
|
|
|
<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 !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="text-red-500 text-[13px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
|
|
</div>
|
|
|
|
<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 !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="text-red-500 text-[13px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
|
|
</div>
|
|
|
|
<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="">-- Chọn phòng ban --</option>
|
|
@foreach(config('constants.DEPARTMENTS') as $dept)
|
|
<option value="{{ $dept }}" {{ old('departments') == $dept ? 'selected' : '' }}>{{ $dept }}</option>
|
|
@endforeach
|
|
</select>
|
|
@error('departments')<span class="text-red-500 text-[13px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
|
|
</div>
|
|
|
|
<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 !rounded-xl !bg-gray-50 !text-gray-500 cursor-not-allowed" style="padding-left: 48px;" readonly required value="1234@Dcba">
|
|
</div>
|
|
<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="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="{{ config('constants.ROLE_MEMBER') }}" {{ old('role') == config('constants.ROLE_MEMBER') ? 'selected' : '' }}>Member</option>
|
|
<option value="{{ config('constants.ROLE_ADMIN') }}" {{ old('role') == config('constants.ROLE_ADMIN') ? 'selected' : '' }}>Admin</option>
|
|
</select>
|
|
@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="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="relative">
|
|
<label class="block text-[14px] font-bold text-[#1a2b49] mb-2" for="mail">Email (Chỉ xem)</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 !rounded-xl !bg-gray-50 !text-gray-500 cursor-not-allowed w-full" style="padding-left: 48px;" readonly value="{{ $user->mail }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<label class="block text-[14px] font-bold text-[#1a2b49] mb-2" for="password">Mật khẩu (Chỉ xem)</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="password" name="password" id="password" class="form-input form-input-with-icon !rounded-xl !bg-gray-50 !text-gray-500 cursor-not-allowed w-full" style="padding-left: 48px;" readonly value="********">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<label class="block text-[14px] font-bold text-[#1a2b49] mb-2">Quyền hạn</label>
|
|
<div class="grid grid-cols-2 gap-2 mt-2 bg-gray-100/80 p-1 rounded-xl">
|
|
<label class="flex items-center justify-center gap-2 cursor-pointer py-2 rounded-lg transition-all text-center has-[:checked]:bg-white has-[:checked]:text-[#3462f7] has-[:checked]:shadow-sm text-gray-500 font-bold text-sm hover:bg-white/50">
|
|
<input type="radio" name="role" value="{{ config('constants.ROLE_MEMBER') }}" class="sr-only" {{ old('role', $user->role) == config('constants.ROLE_MEMBER') ? 'checked' : '' }}>
|
|
<span>Member</span>
|
|
</label>
|
|
<label class="flex items-center justify-center gap-2 cursor-pointer py-2 rounded-lg transition-all text-center has-[:checked]:bg-white has-[:checked]:text-[#3462f7] has-[:checked]:shadow-sm text-gray-500 font-bold text-sm hover:bg-white/50">
|
|
<input type="radio" name="role" value="{{ config('constants.ROLE_ADMIN') }}" class="sr-only" {{ old('role', $user->role) == config('constants.ROLE_ADMIN') ? 'checked' : '' }}>
|
|
<span>Admin</span>
|
|
</label>
|
|
</div>
|
|
@error('role')<span class="text-red-500 text-[13px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<label class="block text-[14px] font-bold text-[#1a2b49] mb-2">Trạng thái</label>
|
|
<div class="grid grid-cols-2 gap-2 mt-2 bg-gray-100/80 p-1 rounded-xl">
|
|
<label class="flex items-center justify-center gap-2 cursor-pointer py-2 rounded-lg transition-all text-center has-[:checked]:bg-white has-[:checked]:text-[#3462f7] has-[:checked]:shadow-sm text-gray-500 font-bold text-sm hover:bg-white/50">
|
|
<input type="radio" name="status" value="{{ config('constants.STATUS_ACTIVE') }}" class="sr-only" {{ old('status', $user->status) == config('constants.STATUS_ACTIVE') ? 'checked' : '' }}>
|
|
<span>Đang làm việc</span>
|
|
</label>
|
|
<label class="flex items-center justify-center gap-2 cursor-pointer py-2 rounded-lg transition-all text-center has-[:checked]:bg-white has-[:checked]:text-[#3462f7] has-[:checked]:shadow-sm text-gray-500 font-bold text-sm hover:bg-white/50">
|
|
<input type="radio" name="status" value="{{ config('constants.STATUS_INACTIVE') }}" class="sr-only" {{ old('status', $user->status) == config('constants.STATUS_INACTIVE') ? 'checked' : '' }}>
|
|
<span>Đã nghỉ việc</span>
|
|
</label>
|
|
</div>
|
|
@error('status')<span class="text-red-500 text-[13px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<label class="block text-[14px] font-bold text-[#1a2b49] mb-2">Quyền gửi thẻ</label>
|
|
<div class="grid grid-cols-2 gap-2 mt-2 bg-gray-100/80 p-1 rounded-xl">
|
|
<label class="flex items-center justify-center gap-2 cursor-pointer py-2 rounded-lg transition-all text-center has-[:checked]:bg-white has-[:checked]:text-[#3462f7] has-[:checked]:shadow-sm text-gray-500 font-bold text-sm hover:bg-white/50">
|
|
<input type="radio" name="flag_send" value="{{ config('constants.FLAG_SEND_ENABLED') }}" class="sr-only" {{ old('flag_send', $user->flag_send) == config('constants.FLAG_SEND_ENABLED') ? 'checked' : '' }}>
|
|
<span>Được phép gửi</span>
|
|
</label>
|
|
<label class="flex items-center justify-center gap-2 cursor-pointer py-2 rounded-lg transition-all text-center has-[:checked]:bg-white has-[:checked]:text-[#3462f7] has-[:checked]:shadow-sm text-gray-500 font-bold text-sm hover:bg-white/50">
|
|
<input type="radio" name="flag_send" value="{{ config('constants.FLAG_SEND_DISABLED') }}" class="sr-only" {{ old('flag_send', $user->flag_send) == config('constants.FLAG_SEND_DISABLED') ? 'checked' : '' }}>
|
|
<span>Không cho phép</span>
|
|
</label>
|
|
</div>
|
|
@error('flag_send')<span class="text-red-500 text-[13px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
|
|
</div>
|
|
|
|
<div class="hidden md:block"></div>
|
|
</div>
|
|
@endif
|
|
|
|
@if($isDelete && $user)
|
|
<p class="text-sm text-red-600 leading-relaxed font-semibold">
|
|
Bạn có chắc chắn muốn cho nhân viên {{ $user->msnv }} nghỉ việc không? Tài khoản này sẽ không thể đăng nhập hoặc thực hiện các giao dịch thẻ sau khi xác nhận.
|
|
</p>
|
|
@endif
|
|
</div>
|
|
|
|
<x-action-panel :mode="$mode" :user="$user" />
|
|
|
|
@if($actionUrl)
|
|
</form>
|
|
@endif
|
|
</div>
|
|
|
|
@if($isCreate)
|
|
@push('styles')
|
|
<style>
|
|
.ts-control { border-radius: 0.75rem; border-color: #d9dfe7; padding: 0.65rem 1rem; }
|
|
.ts-wrapper.form-input { padding: 0; border: none; }
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
new TomSelect("#departments", {
|
|
create: false,
|
|
sortField: {
|
|
field: "text",
|
|
direction: "asc"
|
|
},
|
|
placeholder: "🔍 Tìm phòng ban...",
|
|
render: {
|
|
no_results: function(data, escape) {
|
|
return '<div class="no-results p-3 text-gray-500">Không tìm thấy phòng ban nào</div>';
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endif
|