1310 lines
35 KiB
PHP
1310 lines
35 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('page-title', 'Edit Staff')
|
|
|
|
@section('content')
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
:root {
|
|
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
--glass-bg: rgba(255, 255, 255, 0.98);
|
|
--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Hide scrollbar but allow scroll */
|
|
.hide-scrollbar {
|
|
overflow-y: auto;
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE & Edge */
|
|
}
|
|
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari */
|
|
}
|
|
|
|
/* =========================================== */
|
|
/* HORIZONTAL SCROLL FIXES */
|
|
/* =========================================== */
|
|
html, body {
|
|
overflow-x: hidden !important;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.staff-edit-container,
|
|
.staff-edit-card,
|
|
.form-section,
|
|
.form-grid,
|
|
.permissions-container {
|
|
max-width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Fix grid overflow issues */
|
|
.form-grid,
|
|
.permissions-container {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Fix transform hover effects */
|
|
.permission-group:hover,
|
|
.status-option:hover {
|
|
transform: translateY(-2px) !important;
|
|
}
|
|
|
|
.permission-item:hover {
|
|
transform: translateX(3px) !important;
|
|
}
|
|
|
|
/* Ensure containers don't exceed viewport */
|
|
@media (min-width: 1200px) {
|
|
.staff-edit-card {
|
|
max-width: 95vw;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1440px) {
|
|
.staff-edit-card {
|
|
max-width: 97vw;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1600px) {
|
|
.staff-edit-card {
|
|
max-width: 98vw;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1920px) {
|
|
.staff-edit-card {
|
|
max-width: 99vw;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 15px;
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
}
|
|
|
|
/* FLUID CONTAINER - LIKE SHIPMENT PAGE */
|
|
.staff-edit-container {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.staff-edit-card {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: var(--shadow-lg);
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.staff-edit-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: var(--primary-gradient);
|
|
z-index: 10;
|
|
}
|
|
|
|
/* =========================================== */
|
|
/* UPDATED HEADER LAYOUT */
|
|
/* =========================================== */
|
|
.staff-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
text-align: left;
|
|
background: var(--primary-gradient);
|
|
/* padding: 16px 20px; */
|
|
color: white;
|
|
position: relative;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.staff-avatar {
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 50%;
|
|
background: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32px;
|
|
color: #667eea;
|
|
border: 3px solid white;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.staff-avatar-initials {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
background: var(--primary-gradient);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.staff-header-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.staff-title {
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.staff-subtitle {
|
|
font-size: 1rem;
|
|
opacity: 0.9;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.employee-id-badge {
|
|
display: inline-block;
|
|
background: rgba(255,255,255,0.15);
|
|
padding: 6px 15px;
|
|
border-radius: 20px;
|
|
font-family: 'Courier New', monospace;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
backdrop-filter: blur(5px);
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
}
|
|
|
|
/* Mobile responsive for header */
|
|
@media (max-width: 768px) {
|
|
.staff-header {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
gap: 15px;
|
|
padding: 20px 15px;
|
|
}
|
|
|
|
.staff-avatar {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.staff-header-content {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
/* Adjust avatar sizes for larger screens */
|
|
@media (min-width: 1200px) {
|
|
.staff-header {
|
|
gap: 30px;
|
|
padding: 40px 35px;
|
|
}
|
|
|
|
.staff-avatar {
|
|
width: 90px;
|
|
height: 90px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1440px) {
|
|
.staff-header {
|
|
gap: 35px;
|
|
padding: 45px 40px;
|
|
}
|
|
|
|
.staff-avatar {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1600px) {
|
|
.staff-header {
|
|
gap: 40px;
|
|
padding: 50px 45px;
|
|
}
|
|
|
|
.staff-avatar {
|
|
width: 110px;
|
|
height: 110px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1920px) {
|
|
.staff-header {
|
|
gap: 45px;
|
|
padding: 60px 50px;
|
|
}
|
|
}
|
|
|
|
/* Fluid Form Sections */
|
|
.form-section {
|
|
padding: 25px;
|
|
border-bottom: 1px solid rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.section-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
background: var(--primary-gradient);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 16px;
|
|
box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ADAPTIVE FORM GRID - LIKE SHIPMENT PAGE */
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-weight: 600;
|
|
color: #4a5568;
|
|
margin-bottom: 6px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.required::after {
|
|
content: '*';
|
|
color: #e53e3e;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
/* Form Inputs */
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border: 1.5px solid #e2e8f0;
|
|
border-radius: 10px;
|
|
font-size: 14px;
|
|
transition: all 0.2s ease;
|
|
background: white;
|
|
color: #2d3748;
|
|
}
|
|
|
|
.form-input:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
.form-input:disabled {
|
|
background: #f7fafc;
|
|
color: #a0aec0;
|
|
}
|
|
|
|
.form-textarea {
|
|
min-height: 80px;
|
|
resize: vertical;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Status Toggle */
|
|
.status-toggle {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.status-option {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 12px;
|
|
border: 1.5px solid #e2e8f0;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
background: white;
|
|
}
|
|
|
|
.status-option:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.status-option.active {
|
|
border-color: #48bb78;
|
|
background: #f0fff4;
|
|
color: #276749;
|
|
}
|
|
|
|
.status-option.inactive {
|
|
border-color: #fc8181;
|
|
background: #fff5f5;
|
|
color: #9b2c2c;
|
|
}
|
|
|
|
input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
/* ADAPTIVE PERMISSIONS SECTION - LIKE SHIPMENT PAGE */
|
|
.permissions-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
gap: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.permission-group {
|
|
background: white;
|
|
border: 1.5px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.permission-group:hover {
|
|
border-color: #667eea;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
.group-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid #edf2f7;
|
|
}
|
|
|
|
.group-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
margin: 0;
|
|
}
|
|
|
|
.toggle-group-btn {
|
|
background: var(--primary-gradient);
|
|
color: white;
|
|
border: none;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
font-size: 0.85rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.toggle-group-btn:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.permission-items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.permission-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px;
|
|
background: #f8fafc;
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.permission-item:hover {
|
|
background: #edf2f7;
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
.permission-checkbox {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 4px;
|
|
border: 2px solid #cbd5e0;
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: all 0.2s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.permission-checkbox:checked {
|
|
background: #667eea;
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.permission-checkbox:checked::after {
|
|
content: '✓';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.permission-name {
|
|
font-weight: 500;
|
|
color: #4a5568;
|
|
font-size: 0.9rem;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Error Messages */
|
|
.error-container {
|
|
background: linear-gradient(135deg, #fff5f5, #fed7d7);
|
|
border: 1.5px solid #fc8181;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
margin: 0 25px 20px 25px;
|
|
}
|
|
|
|
.error-title {
|
|
color: #c53030;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.error-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.error-item {
|
|
color: #742a2a;
|
|
padding: 6px 0;
|
|
padding-left: 20px;
|
|
position: relative;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.error-item::before {
|
|
content: '⚠️';
|
|
position: absolute;
|
|
left: 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Action Buttons */
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: flex-end;
|
|
padding: 25px;
|
|
background: #f8fafc;
|
|
border-top: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.btn {
|
|
padding: 12px 24px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
border: none;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.btn-cancel {
|
|
background: white;
|
|
color: #4a5568;
|
|
border: 1.5px solid #e2e8f0;
|
|
}
|
|
|
|
.btn-cancel:hover {
|
|
background: #f7fafc;
|
|
border-color: #cbd5e0;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 3px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.btn-update {
|
|
background: var(--primary-gradient);
|
|
color: white;
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
|
}
|
|
|
|
.btn-update:hover {
|
|
transform: translateY(-1px) scale(1.02);
|
|
box-shadow: 0 6px 16px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
/* Password Strength Indicator */
|
|
.password-strength {
|
|
margin-top: 6px;
|
|
height: 3px;
|
|
border-radius: 1.5px;
|
|
background: #e2e8f0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.strength-bar {
|
|
height: 100%;
|
|
width: 0%;
|
|
border-radius: 1.5px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.strength-weak { background: #e53e3e; }
|
|
.strength-fair { background: #ed8936; }
|
|
.strength-good { background: #38b2ac; }
|
|
.strength-strong { background: #48bb78; }
|
|
|
|
/* =========================================== */
|
|
/* DESKTOP MEDIA QUERIES - LIKE SHIPMENT PAGE */
|
|
/* =========================================== */
|
|
|
|
/* Base desktop - 992px+ */
|
|
@media (min-width: 992px) {
|
|
body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.form-section {
|
|
padding: 30px;
|
|
}
|
|
|
|
.staff-header {
|
|
padding: 35px 30px;
|
|
}
|
|
|
|
.form-grid {
|
|
gap: 25px;
|
|
}
|
|
|
|
.permissions-container {
|
|
gap: 20px;
|
|
}
|
|
}
|
|
|
|
/* Large desktop - 1200px+ */
|
|
@media (min-width: 1200px) {
|
|
.staff-edit-card {
|
|
margin: 0 auto;
|
|
max-width: 95vw;
|
|
}
|
|
|
|
.form-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 30px;
|
|
}
|
|
|
|
.permissions-container {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 25px;
|
|
}
|
|
|
|
.staff-header {
|
|
padding: 40px 35px;
|
|
}
|
|
|
|
.staff-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.staff-avatar {
|
|
width: 90px;
|
|
height: 90px;
|
|
font-size: 36px;
|
|
}
|
|
|
|
.staff-avatar-initials {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.form-section {
|
|
padding: 35px;
|
|
}
|
|
|
|
.action-buttons {
|
|
padding: 30px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 14px 28px;
|
|
min-width: 140px;
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
/* Extra large desktop - 1440px+ */
|
|
@media (min-width: 1440px) {
|
|
.staff-edit-card {
|
|
max-width: 97vw;
|
|
}
|
|
|
|
.form-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 35px;
|
|
}
|
|
|
|
.permissions-container {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 30px;
|
|
}
|
|
|
|
.staff-header {
|
|
padding: 45px 40px;
|
|
}
|
|
|
|
.staff-title {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
.staff-avatar {
|
|
width: 100px;
|
|
height: 100px;
|
|
font-size: 40px;
|
|
}
|
|
|
|
.staff-avatar-initials {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.form-input {
|
|
padding: 14px 18px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.form-label {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.section-icon {
|
|
width: 45px;
|
|
height: 45px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.group-title {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.permission-group {
|
|
padding: 25px;
|
|
}
|
|
|
|
.permission-name {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.btn {
|
|
padding: 15px 32px;
|
|
min-width: 150px;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
/* Ultra wide desktop - 1600px+ */
|
|
@media (min-width: 1600px) {
|
|
.staff-edit-card {
|
|
max-width: 98vw;
|
|
}
|
|
|
|
.form-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 40px;
|
|
}
|
|
|
|
.permissions-container {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 35px;
|
|
}
|
|
|
|
.staff-header {
|
|
padding: 50px 45px;
|
|
}
|
|
|
|
.staff-title {
|
|
font-size: 2.4rem;
|
|
}
|
|
|
|
.staff-avatar {
|
|
width: 110px;
|
|
height: 110px;
|
|
font-size: 44px;
|
|
}
|
|
|
|
.staff-avatar-initials {
|
|
font-size: 44px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.form-input {
|
|
padding: 15px 20px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.form-label {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.section-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.group-title {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.permission-group {
|
|
padding: 30px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 16px 36px;
|
|
min-width: 160px;
|
|
font-size: 17px;
|
|
}
|
|
}
|
|
|
|
/* Ultra wide 4K+ screens - 1920px+ */
|
|
@media (min-width: 1920px) {
|
|
body {
|
|
padding: 30px;
|
|
}
|
|
|
|
.staff-edit-card {
|
|
max-width: 99vw;
|
|
}
|
|
|
|
.form-grid {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 45px;
|
|
}
|
|
|
|
.permissions-container {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 40px;
|
|
}
|
|
|
|
.staff-header {
|
|
padding: 60px 50px;
|
|
}
|
|
|
|
.staff-title {
|
|
font-size: 2.6rem;
|
|
}
|
|
|
|
.form-section {
|
|
padding: 40px;
|
|
}
|
|
|
|
.action-buttons {
|
|
padding: 40px;
|
|
}
|
|
}
|
|
|
|
/* =========================================== */
|
|
/* MOBILE RESPONSIVE (UNCHANGED) */
|
|
/* =========================================== */
|
|
@media (max-width: 768px) {
|
|
body {
|
|
padding: 10px;
|
|
}
|
|
|
|
.form-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 15px;
|
|
}
|
|
|
|
.permissions-container {
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.staff-header {
|
|
padding: 20px 15px;
|
|
}
|
|
|
|
.staff-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.form-section {
|
|
padding: 20px;
|
|
}
|
|
|
|
.action-buttons {
|
|
padding: 20px;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
}
|
|
|
|
.error-container {
|
|
margin: 0 15px 15px 15px;
|
|
padding: 15px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.staff-avatar {
|
|
width: 60px;
|
|
height: 60px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.staff-avatar-initials {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.section-icon {
|
|
width: 35px;
|
|
height: 35px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.permission-group {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="staff-edit-container">
|
|
<!-- Main Card -->
|
|
<div class="staff-edit-card">
|
|
<!-- Fluid Header -->
|
|
<div class="staff-header">
|
|
<div class="staff-avatar">
|
|
<div class="staff-avatar-initials">
|
|
{{ strtoupper(substr($staff->name, 0, 2)) }}
|
|
</div>
|
|
</div>
|
|
<div class="staff-header-content">
|
|
<h1 class="staff-title">Edit Staff Profile</h1>
|
|
<div class="staff-subtitle">{{ $staff->name }}</div>
|
|
<div class="employee-id-badge">{{ $staff->employee_id }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error Messages -->
|
|
@if($errors->any())
|
|
<div class="error-container">
|
|
<div class="error-title">
|
|
<span>⚠️</span>
|
|
There were some problems with your input
|
|
</div>
|
|
<ul class="error-list">
|
|
@foreach($errors->all() as $err)
|
|
<li class="error-item">{{ $err }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('admin.staff.update', $staff->id) }}" id="staffForm">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<!-- Personal Information Section -->
|
|
<div class="form-section">
|
|
<div class="section-header">
|
|
<div class="section-icon">👤</div>
|
|
<h2 class="section-title">Personal Information</h2>
|
|
</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label required">Full Name</label>
|
|
<input type="text"
|
|
name="name"
|
|
value="{{ old('name', $staff->name) }}"
|
|
class="form-input"
|
|
placeholder="Enter full name"
|
|
required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label required">Email</label>
|
|
<input type="email"
|
|
name="email"
|
|
value="{{ old('email', $staff->email) }}"
|
|
class="form-input"
|
|
placeholder="staff@company.com"
|
|
required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label required">Phone</label>
|
|
<input type="text"
|
|
name="phone"
|
|
value="{{ old('phone', $staff->phone) }}"
|
|
class="form-input"
|
|
placeholder="+91 9876543210"
|
|
required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Emergency Contact</label>
|
|
<input type="text"
|
|
name="emergency_phone"
|
|
value="{{ old('emergency_phone', $staff->emergency_phone) }}"
|
|
class="form-input"
|
|
placeholder="Emergency contact">
|
|
</div>
|
|
|
|
<div class="form-group" style="grid-column: span 2;">
|
|
<label class="form-label">Address</label>
|
|
<textarea name="address"
|
|
class="form-input form-textarea"
|
|
placeholder="Enter complete address"
|
|
rows="3">{{ old('address', $staff->address) }}</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Professional Information Section -->
|
|
<div class="form-section">
|
|
<div class="section-header">
|
|
<div class="section-icon">💼</div>
|
|
<h2 class="section-title">Professional Information</h2>
|
|
</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label">Employee ID</label>
|
|
<input type="text"
|
|
value="{{ $staff->employee_id }}"
|
|
class="form-input"
|
|
disabled
|
|
style="background: #f7fafc;">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Role</label>
|
|
<input type="text"
|
|
name="role"
|
|
value="{{ old('role', $staff->role) }}"
|
|
class="form-input"
|
|
placeholder="e.g., Manager, Executive">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Department</label>
|
|
<input type="text"
|
|
name="department"
|
|
value="{{ old('department', $staff->department) }}"
|
|
class="form-input"
|
|
placeholder="e.g., IT, HR">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Designation</label>
|
|
<input type="text"
|
|
name="designation"
|
|
value="{{ old('designation', $staff->designation) }}"
|
|
class="form-input"
|
|
placeholder="e.g., Senior Developer">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Joining Date</label>
|
|
<input type="date"
|
|
name="joining_date"
|
|
value="{{ old('joining_date', optional($staff->joining_date)->format('Y-m-d')) }}"
|
|
class="form-input">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Status</label>
|
|
<div class="status-toggle">
|
|
<label class="status-option {{ old('status', $staff->status) == 'active' ? 'active' : '' }}">
|
|
<input type="radio" name="status" value="active" {{ old('status', $staff->status) == 'active' ? 'checked' : '' }}>
|
|
<span>✅ Active</span>
|
|
</label>
|
|
<label class="status-option {{ old('status', $staff->status) == 'inactive' ? 'inactive' : '' }}">
|
|
<input type="radio" name="status" value="inactive" {{ old('status', $staff->status) == 'inactive' ? 'checked' : '' }}>
|
|
<span>⏸️ Inactive</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Information Section -->
|
|
<div class="form-section">
|
|
<div class="section-header">
|
|
<div class="section-icon">🔐</div>
|
|
<h2 class="section-title">Account Information</h2>
|
|
</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label required">Username</label>
|
|
<input type="text"
|
|
name="username"
|
|
value="{{ old('username', $staff->username) }}"
|
|
class="form-input"
|
|
placeholder="Choose username"
|
|
required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">New Password</label>
|
|
<input type="password"
|
|
name="password"
|
|
class="form-input"
|
|
placeholder="Leave blank to keep existing"
|
|
id="passwordInput"
|
|
autocomplete="new-password">
|
|
<div class="password-strength">
|
|
<div class="strength-bar" id="strengthBar"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Confirm Password</label>
|
|
<input type="password"
|
|
name="password_confirmation"
|
|
class="form-input"
|
|
placeholder="Confirm new password">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Information Section -->
|
|
<div class="form-section">
|
|
<div class="section-header">
|
|
<div class="section-icon">📝</div>
|
|
<h2 class="section-title">Additional Information</h2>
|
|
</div>
|
|
<div class="form-grid">
|
|
<div class="form-group" style="grid-column: span 2;">
|
|
<label class="form-label">Additional Notes</label>
|
|
<textarea name="additional_info"
|
|
class="form-input form-textarea"
|
|
placeholder="Any additional information"
|
|
rows="3">{{ old('additional_info', $staff->additional_info) }}</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Permissions Section -->
|
|
<div class="form-section">
|
|
<div class="section-header">
|
|
<div class="section-icon">🔑</div>
|
|
<h2 class="section-title">Permissions & Access</h2>
|
|
</div>
|
|
|
|
<div class="permissions-container">
|
|
@foreach($permissions as $group => $groupPerms)
|
|
<div class="permission-group">
|
|
<div class="group-header">
|
|
<h3 class="group-title">{{ ucfirst($group) }}</h3>
|
|
<button type="button"
|
|
class="toggle-group-btn"
|
|
onclick="toggleGroupPermissions('{{ $group }}')">
|
|
Toggle All
|
|
</button>
|
|
</div>
|
|
<div class="permission-items" id="permission-group-{{ $group }}">
|
|
@foreach($groupPerms as $perm)
|
|
<label class="permission-item">
|
|
<input type="checkbox"
|
|
name="permissions[]"
|
|
value="{{ $perm->name }}"
|
|
class="permission-checkbox"
|
|
id="perm-{{ $perm->id }}"
|
|
{{ in_array($perm->name, old('permissions', $staffPermissions)) ? 'checked' : '' }}>
|
|
<span class="permission-name">{{ $perm->name }}</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="action-buttons">
|
|
<a href="{{ route('admin.staff.index') }}" class="btn btn-cancel">
|
|
<span>←</span>
|
|
Cancel
|
|
</a>
|
|
<button type="submit" class="btn btn-update">
|
|
<span>💾</span>
|
|
Update Profile
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Password Strength Indicator
|
|
document.getElementById('passwordInput').addEventListener('input', function(e) {
|
|
const password = e.target.value;
|
|
const strengthBar = document.getElementById('strengthBar');
|
|
let strength = 0;
|
|
|
|
if (password.length >= 8) strength++;
|
|
if (/[A-Z]/.test(password)) strength++;
|
|
if (/[0-9]/.test(password)) strength++;
|
|
if (/[^A-Za-z0-9]/.test(password)) strength++;
|
|
|
|
let width = 0;
|
|
let className = '';
|
|
|
|
switch(strength) {
|
|
case 0:
|
|
width = 0;
|
|
className = 'strength-weak';
|
|
break;
|
|
case 1:
|
|
width = 25;
|
|
className = 'strength-weak';
|
|
break;
|
|
case 2:
|
|
width = 50;
|
|
className = 'strength-fair';
|
|
break;
|
|
case 3:
|
|
width = 75;
|
|
className = 'strength-good';
|
|
break;
|
|
case 4:
|
|
width = 100;
|
|
className = 'strength-strong';
|
|
break;
|
|
}
|
|
|
|
strengthBar.style.width = width + '%';
|
|
strengthBar.className = 'strength-bar ' + className;
|
|
});
|
|
|
|
// Toggle Group Permissions
|
|
function toggleGroupPermissions(group) {
|
|
const checkboxes = document.querySelectorAll(`#permission-group-${group} .permission-checkbox`);
|
|
const allChecked = Array.from(checkboxes).every(cb => cb.checked);
|
|
|
|
checkboxes.forEach(checkbox => {
|
|
checkbox.checked = !allChecked;
|
|
checkbox.dispatchEvent(new Event('change'));
|
|
});
|
|
}
|
|
|
|
// Status toggle selection
|
|
document.querySelectorAll('.status-option').forEach(option => {
|
|
option.addEventListener('click', function() {
|
|
document.querySelectorAll('.status-option').forEach(opt => {
|
|
opt.classList.remove('active', 'inactive');
|
|
});
|
|
|
|
const input = this.querySelector('input');
|
|
if (input.value === 'active') {
|
|
this.classList.add('active');
|
|
} else {
|
|
this.classList.add('inactive');
|
|
}
|
|
|
|
input.checked = true;
|
|
});
|
|
});
|
|
|
|
// Form validation
|
|
document.getElementById('staffForm').addEventListener('submit', function(e) {
|
|
const requiredFields = this.querySelectorAll('[required]');
|
|
let valid = true;
|
|
|
|
requiredFields.forEach(field => {
|
|
if (!field.value.trim()) {
|
|
valid = false;
|
|
field.style.borderColor = '#e53e3e';
|
|
field.style.animation = 'shake 0.3s ease';
|
|
|
|
setTimeout(() => {
|
|
field.style.animation = '';
|
|
}, 300);
|
|
} else {
|
|
field.style.borderColor = '#e2e8f0';
|
|
}
|
|
});
|
|
|
|
if (!valid) {
|
|
e.preventDefault();
|
|
const firstError = this.querySelector('[required]:invalid');
|
|
if (firstError) {
|
|
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
}
|
|
}
|
|
});
|
|
|
|
// Add shake animation
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-4px); }
|
|
75% { transform: translateX(4px); }
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
</script>
|
|
@endsection |