311 lines
12 KiB
PHP
311 lines
12 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('title', 'Edit User')
|
|
|
|
@include('admin.shared.admin-styles')
|
|
|
|
@section('content')
|
|
<div class="admin-container container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="page-header animate-fade-in">
|
|
<div class="row align-items-center">
|
|
<div class="col-12">
|
|
<h3 class="mb-2 text-white">
|
|
<i class="fas fa-user-edit me-2"></i>Edit User
|
|
</h3>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb mb-0">
|
|
<li class="breadcrumb-item"><a href="{{ route('admindash') }}" class="text-white-50">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{{ route('datauser') }}" class="text-white-50">Users</a></li>
|
|
<li class="breadcrumb-item active text-white" aria-current="page">Edit User</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="admin-card animate-fade-in">
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-4">
|
|
<i class="fas fa-user-cog me-2"></i>User Information
|
|
</h5>
|
|
|
|
<form id="editUserForm" method="POST" action="{{ url("/datauser/{$user->id}") }}">
|
|
@method('PUT')
|
|
@csrf
|
|
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="admin-form-group">
|
|
<label class="admin-form-label">
|
|
<i class="fas fa-user me-2"></i>Name
|
|
</label>
|
|
<input type="text"
|
|
class="admin-form-control"
|
|
name="name"
|
|
value="{{ $user->name }}"
|
|
required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="admin-form-group">
|
|
<label class="admin-form-label">
|
|
<i class="fas fa-envelope me-2"></i>Email
|
|
</label>
|
|
<input type="email"
|
|
class="admin-form-control"
|
|
name="email"
|
|
value="{{ $user->email }}"
|
|
required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="admin-form-group">
|
|
<label class="admin-form-label">
|
|
<i class="fas fa-phone me-2"></i>Phone Number
|
|
</label>
|
|
<input type="text"
|
|
class="admin-form-control"
|
|
name="no_telp"
|
|
value="{{ $user->no_telp }}"
|
|
required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="admin-form-group">
|
|
<label class="admin-form-label">
|
|
<i class="fas fa-user-tag me-2"></i>Role
|
|
</label>
|
|
<select class="admin-form-control" name="role_id" required>
|
|
@foreach ($roles as $id => $name)
|
|
<option value="{{ $id }}" {{ $user->role_id == $id ? 'selected' : '' }}>
|
|
{{ $name }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="admin-form-group">
|
|
<label class="admin-form-label">
|
|
<i class="fas fa-key me-2"></i>Password
|
|
</label>
|
|
<div class="input-group">
|
|
<input type="password"
|
|
class="admin-form-control"
|
|
name="password"
|
|
id="passwordField"
|
|
placeholder="Leave blank to keep current password">
|
|
<button type="button"
|
|
class="btn btn-outline-secondary"
|
|
onclick="togglePasswordVisibility('passwordField', 'toggleIcon')">
|
|
<i class="fas fa-eye" id="toggleIcon"></i>
|
|
</button>
|
|
</div>
|
|
<small class="text-muted">Only fill this if you want to change the password</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="admin-form-group">
|
|
<label class="admin-form-label">
|
|
<i class="fas fa-key me-2"></i>Confirm Password
|
|
</label>
|
|
<div class="input-group">
|
|
<input type="password"
|
|
class="admin-form-control"
|
|
name="password_confirmation"
|
|
id="confirmPasswordField"
|
|
placeholder="Confirm new password">
|
|
<button type="button"
|
|
class="btn btn-outline-secondary"
|
|
onclick="togglePasswordVisibility('confirmPasswordField', 'toggleConfirmIcon')">
|
|
<i class="fas fa-eye" id="toggleConfirmIcon"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-end mt-4">
|
|
<button type="reset" class="btn btn-secondary me-2">
|
|
<i class="fas fa-undo me-2"></i>Reset
|
|
</button>
|
|
<a href="{{ route('datauser') }}" class="btn btn-secondary me-2">
|
|
<i class="fas fa-arrow-left me-2"></i>Back
|
|
</a>
|
|
<button type="button" class="btn btn-primary" onclick="confirmSave()">
|
|
<i class="fas fa-save me-2"></i>Save Changes
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.admin-form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.admin-form-label {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
margin-bottom: 0.5rem;
|
|
color: #333;
|
|
}
|
|
|
|
.admin-form-label i {
|
|
width: 20px;
|
|
color: #2196f3;
|
|
}
|
|
|
|
.admin-form-control {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 0.75rem 1rem;
|
|
width: 100%;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.admin-form-control:focus {
|
|
border-color: #2196f3;
|
|
box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
|
|
}
|
|
|
|
.input-group .btn {
|
|
padding: 0.75rem;
|
|
border: 1px solid #dee2e6;
|
|
background: #f8f9fa;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.input-group .btn:hover {
|
|
background: #e9ecef;
|
|
color: #2196f3;
|
|
}
|
|
|
|
.input-group .admin-form-control {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.input-group .btn {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.text-muted {
|
|
font-size: 0.875rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* Responsive Adjustments */
|
|
@media (max-width: 768px) {
|
|
.admin-form-control {
|
|
padding: 0.625rem 0.875rem;
|
|
}
|
|
|
|
.input-group .btn {
|
|
padding: 0.625rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<!-- SweetAlert2 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<script>
|
|
function togglePasswordVisibility(fieldId, iconId) {
|
|
var field = document.getElementById(fieldId);
|
|
var icon = document.getElementById(iconId);
|
|
|
|
if (field.type === "password") {
|
|
field.type = "text";
|
|
icon.classList.remove('fa-eye');
|
|
icon.classList.add('fa-eye-slash');
|
|
} else {
|
|
field.type = "password";
|
|
icon.classList.remove('fa-eye-slash');
|
|
icon.classList.add('fa-eye');
|
|
}
|
|
}
|
|
|
|
function confirmSave() {
|
|
// Get password fields
|
|
const password = document.getElementById('passwordField').value;
|
|
const confirmPassword = document.getElementById('confirmPasswordField').value;
|
|
|
|
// Check if either password field is filled
|
|
if (password || confirmPassword) {
|
|
// If one is filled, both must be filled and match
|
|
if (!password || !confirmPassword) {
|
|
Swal.fire({
|
|
title: 'Password Error',
|
|
text: 'Both password fields must be filled when changing password',
|
|
icon: 'error',
|
|
confirmButtonColor: '#2196f3',
|
|
confirmButtonText: 'OK'
|
|
});
|
|
return;
|
|
}
|
|
if (password !== confirmPassword) {
|
|
Swal.fire({
|
|
title: 'Password Mismatch',
|
|
text: 'Password and confirmation do not match',
|
|
icon: 'error',
|
|
confirmButtonColor: '#2196f3',
|
|
confirmButtonText: 'OK'
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
|
|
Swal.fire({
|
|
title: 'Save Changes',
|
|
text: "Are you sure you want to update this user?",
|
|
icon: 'question',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#2196f3',
|
|
cancelButtonColor: '#6c757d',
|
|
confirmButtonText: '<i class="fas fa-save me-2"></i>Yes, save it!',
|
|
cancelButtonText: '<i class="fas fa-times me-2"></i>Cancel'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
document.getElementById('editUserForm').submit();
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const animateElements = document.querySelectorAll('.animate-fade-in');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = 1;
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
});
|
|
|
|
animateElements.forEach(element => {
|
|
element.style.opacity = 0;
|
|
element.style.transform = 'translateY(20px)';
|
|
observer.observe(element);
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|