diff --git a/resources/views/admin/customers_add.blade.php b/resources/views/admin/customers_add.blade.php index 27c0169..5fad95e 100644 --- a/resources/views/admin/customers_add.blade.php +++ b/resources/views/admin/customers_add.blade.php @@ -5,7 +5,42 @@ @section('content') -
- -
-
- -
-

- - Add New Customer -

+
+ +
+ +
+

+ + Add New Customer +

+
+ + +
+ + - -
-
- @csrf - -
- -
- - -
Minimum 2 characters, letters only
-
- - -
- - -
- - -
- - -
- - -
- - -
Valid email format required
-
- - -
- - -
10 digits without spaces
-
- - -
- - -
6-digit pincode
-
- - -
- - -
- - -
- - -
Premium customers get special benefits
-
- - -
- - -
Active customers can place orders
-
-
- - -
- - - Cancel - - -
-
+ + + +
+ @csrf + +
+ +
+ + +
Minimum 2 characters, letters only
+ @error('customer_name') +
{{ $message }}
+ @enderror +
+ + +
+ + + @error('company_name') +
{{ $message }}
+ @enderror +
+ + +
+ + + @error('designation') +
{{ $message }}
+ @enderror +
+ + +
+ + +
Valid email format required
+ @error('email') +
{{ $message }}
+ @enderror +
+ + +
+ + +
10 digits without spaces
+ @error('mobile_no') +
{{ $message }}
+ @enderror +
+ + +
+ + +
6-digit pincode
+ @error('pincode') +
{{ $message }}
+ @enderror +
+ + +
+ + + @error('address') +
{{ $message }}
+ @enderror +
+ + +
+ + +
Premium customers get special benefits
+ @error('customer_type') +
{{ $message }}
+ @enderror +
+ + +
+ + +
Active customers can place orders
+ @error('status') +
{{ $message }}
+ @enderror +
+
+ + +
+ + + Cancel + + +
+
@@ -492,7 +878,14 @@ textarea.form-control:focus { document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('customerForm'); const submitBtn = document.getElementById('submitBtn'); + const successMessage = document.getElementById('successMessage'); + const errorMessage = document.getElementById('errorMessage'); + const errorText = document.getElementById('errorText'); + + // Store original button content + const originalBtnContent = submitBtn.innerHTML; + // Form submission handler form.addEventListener('submit', function(e) { // Add loading state submitBtn.classList.add('loading'); @@ -510,33 +903,197 @@ document.addEventListener('DOMContentLoaded', function() { }, 1500); }, 1000); }); + // Traditional form submission fallback (if JavaScript fails) + form.setAttribute('onsubmit', 'return validateFormOnSubmit()'); - // Real-time validation - const inputs = form.querySelectorAll('input[required]'); + function validateForm() { + let isValid = true; + const requiredFields = form.querySelectorAll('[required]'); + + // Clear previous error highlights + form.querySelectorAll('.is-invalid').forEach(el => { + el.classList.remove('is-invalid'); + }); + + // Validate each required field + requiredFields.forEach(field => { + if (!field.value.trim()) { + field.classList.add('is-invalid'); + isValid = false; + } else if (field.type === 'email' && !validateEmail(field.value)) { + field.classList.add('is-invalid'); + isValid = false; + } else if (field.pattern && !new RegExp(field.pattern).test(field.value)) { + field.classList.add('is-invalid'); + isValid = false; + } + }); + + return isValid; + } + + function validateEmail(email) { + const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return re.test(email); + } + + function resetSubmitButton() { + submitBtn.classList.remove('loading'); + submitBtn.innerHTML = originalBtnContent; + submitBtn.disabled = false; + } + + // Real-time validation with improved UX + const inputs = form.querySelectorAll('input[required], select[required]'); inputs.forEach(input => { input.addEventListener('blur', function() { - if (this.value && this.checkValidity()) { - this.style.borderLeft = '2px solid #10b981'; - } else if (this.value && !this.checkValidity()) { - this.style.borderLeft = '2px solid #ef4444'; - } else { + validateField(this); + }); + + input.addEventListener('input', function() { + // Remove validation styling while user is typing + if (this.value) { + this.classList.remove('is-invalid'); this.style.borderLeft = ''; } }); }); + function validateField(field) { + const hint = field.nextElementSibling?.nextElementSibling; + + if (field.value.trim() === '') { + field.classList.add('is-invalid'); + field.style.borderLeft = '2px solid #ef4444'; + if (hint && hint.classList.contains('input-hint')) { + hint.innerHTML = `❌ This field is required`; + } + } else if (field.checkValidity()) { + field.classList.remove('is-invalid'); + field.style.borderLeft = '2px solid #10b981'; + if (hint && hint.classList.contains('input-hint')) { + hint.innerHTML = hint.getAttribute('data-original-hint') || hint.innerHTML; + } + } else { + field.classList.add('is-invalid'); + field.style.borderLeft = '2px solid #ef4444'; + if (hint && hint.classList.contains('input-hint')) { + const errorMsg = getErrorMessage(field); + hint.innerHTML = `❌ ${errorMsg}`; + } + } + } + + function getErrorMessage(field) { + if (field.type === 'email') { + return 'Please enter a valid email address'; + } + if (field.pattern === '[0-9]{10}') { + return 'Please enter 10 digits only'; + } + if (field.pattern === '[A-Za-z\\s]{2,}') { + return 'Minimum 2 letters, no numbers or special characters'; + } + return 'Please check this field'; + } + + // Store original hint text + document.querySelectorAll('.input-hint').forEach(hint => { + hint.setAttribute('data-original-hint', hint.innerHTML); + }); + // Enhanced input interactions const formControls = form.querySelectorAll('.form-control, .form-select'); formControls.forEach(control => { control.addEventListener('focus', function() { this.style.transform = 'translateY(-2px)'; + this.parentElement.style.zIndex = '1'; }); control.addEventListener('blur', function() { this.style.transform = 'translateY(0)'; + this.parentElement.style.zIndex = '0'; }); }); + + // Auto-format mobile number + const mobileInput = document.getElementById('mobile_no'); + if (mobileInput) { + mobileInput.addEventListener('input', function(e) { + let value = e.target.value.replace(/\D/g, ''); + if (value.length > 10) { + value = value.substring(0, 10); + } + e.target.value = value; + }); + } + + // Auto-format pincode + const pincodeInput = document.getElementById('pincode'); + if (pincodeInput) { + pincodeInput.addEventListener('input', function(e) { + let value = e.target.value.replace(/\D/g, ''); + if (value.length > 6) { + value = value.substring(0, 6); + } + e.target.value = value; + }); + } + + // Handle zoom level detection and adjustment + function checkZoomLevel() { + const visualViewport = window.visualViewport || window; + const layoutViewport = window; + + // Calculate zoom level (approximate) + const zoom = Math.round((visualViewport.width / layoutViewport.innerWidth) * 100); + + // Adjust spacing for different zoom levels + const root = document.documentElement; + + if (zoom > 110) { + // High zoom - reduce spacing + root.style.setProperty('--space-sm', '0.5rem'); + root.style.setProperty('--input-padding', '0.5rem'); + root.style.setProperty('--card-padding', '1rem'); + } else if (zoom < 80) { + // Low zoom - increase spacing + root.style.setProperty('--space-sm', '1rem'); + root.style.setProperty('--input-padding', '1rem'); + root.style.setProperty('--card-padding', '1.5rem'); + } else { + // Normal zoom - reset to defaults + root.style.setProperty('--space-sm', '0.75rem'); + root.style.setProperty('--input-padding', 'clamp(0.75rem, 1vw, 1rem)'); + root.style.setProperty('--card-padding', 'clamp(1rem, 2vw, 1.875rem)'); + } + } + + // Initial check + checkZoomLevel(); + + // Check on resize and zoom + window.addEventListener('resize', checkZoomLevel); + if (window.visualViewport) { + window.visualViewport.addEventListener('resize', checkZoomLevel); + } }); + +// Global validation function for traditional form submission +function validateFormOnSubmit() { + const form = document.getElementById('customerForm'); + const requiredFields = form.querySelectorAll('[required]'); + let isValid = true; + + requiredFields.forEach(field => { + if (!field.value.trim()) { + field.classList.add('is-invalid'); + isValid = false; + } + }); + + return isValid; +} @endsection \ No newline at end of file diff --git a/resources/views/admin/staff/create.blade.php b/resources/views/admin/staff/create.blade.php index 7fe1dfe..b5d81bb 100644 --- a/resources/views/admin/staff/create.blade.php +++ b/resources/views/admin/staff/create.blade.php @@ -4,7 +4,47 @@ @section('content')
@@ -960,13 +1013,18 @@
-
-
👨‍💼
+
+
👨‍💼
+

Add New Staff Member

-

Complete all the steps below to add a new staff member to your team

+

+ Complete all the steps below to add a new staff member to your team +

+
+
diff --git a/resources/views/admin/staff/edit.blade.php b/resources/views/admin/staff/edit.blade.php index aeb0f7a..99ce405 100644 --- a/resources/views/admin/staff/edit.blade.php +++ b/resources/views/admin/staff/edit.blade.php @@ -11,6 +11,79 @@ --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; @@ -46,21 +119,26 @@ z-index: 10; } - /* Fluid Header */ + /* =========================================== */ + /* UPDATED HEADER LAYOUT */ + /* =========================================== */ .staff-header { + display: flex; + align-items: center; + gap: 14px; + text-align: left; background: var(--primary-gradient); - padding: 30px 25px; + /* padding: 16px 20px; */ color: white; - text-align: center; position: relative; + flex-wrap: wrap; } .staff-avatar { - width: 80px; - height: 80px; + width: 70px; + height: 70px; border-radius: 50%; background: white; - margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; @@ -68,6 +146,7 @@ color: #667eea; border: 3px solid white; box-shadow: 0 5px 15px rgba(0,0,0,0.2); + flex-shrink: 0; } .staff-avatar-initials { @@ -78,6 +157,11 @@ -webkit-text-fill-color: transparent; } + .staff-header-content { + flex: 1; + min-width: 0; + } + .staff-title { font-size: 1.8rem; font-weight: 700; @@ -102,6 +186,68 @@ 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; @@ -479,7 +625,7 @@ @media (min-width: 1200px) { .staff-edit-card { margin: 0 auto; - max-width: 95%; + max-width: 95vw; } .form-grid { @@ -532,7 +678,7 @@ /* Extra large desktop - 1440px+ */ @media (min-width: 1440px) { .staff-edit-card { - max-width: 97%; + max-width: 97vw; } .form-grid { @@ -604,7 +750,7 @@ /* Ultra wide desktop - 1600px+ */ @media (min-width: 1600px) { .staff-edit-card { - max-width: 98%; + max-width: 98vw; } .form-grid { @@ -676,7 +822,7 @@ } .staff-edit-card { - max-width: 99%; + max-width: 99vw; } .form-grid { @@ -788,9 +934,11 @@ {{ strtoupper(substr($staff->name, 0, 2)) }}
-

Edit Staff Profile

-
{{ $staff->name }}
-
{{ $staff->employee_id }}
+
+

Edit Staff Profile

+
{{ $staff->name }}
+
{{ $staff->employee_id }}
+