262 lines
10 KiB
PHP
262 lines
10 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('page_title', 'My Profile')
|
|
|
|
@section('content')
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<div class="profile-image mb-3">
|
|
@if(isset($user['avatar']))
|
|
<img src="{{ $user['avatar'] }}" alt="Profile Picture" class="rounded-circle" style="width: 150px; height: 150px; object-fit: cover;">
|
|
@else
|
|
<div class="default-avatar rounded-circle d-flex align-items-center justify-content-center" style="width: 150px; height: 150px; background-color: #e9ecef; margin: 0 auto;">
|
|
<i class="fas fa-user fa-4x text-secondary"></i>
|
|
</div>
|
|
@endif
|
|
<div class="mt-2">
|
|
<label for="avatar" class="btn btn-sm btn-outline-primary">
|
|
Change Photo
|
|
<input type="file" id="avatar" name="avatar" class="d-none" accept="image/*">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<h4 class="mb-1">{{ $user['name'] ?? 'User Name' }}</h4>
|
|
<p class="text-muted">{{ $user['role'] ?? 'Role' }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">Profile Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="profileForm" method="POST" action="{{ route('profile.update') }}">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="firstName">First Name</label>
|
|
<input type="text" class="form-control" id="firstName" name="firstName" value="{{ old('firstName', $user['firstName'] ?? '') }}" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="lastName">Last Name</label>
|
|
<input type="text" class="form-control" id="lastName" name="lastName" value="{{ old('lastName', $user['lastName'] ?? '') }}" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="email">Email</label>
|
|
<input type="email" class="form-control" id="email" name="email" value="{{ old('email', $user['email'] ?? '') }}" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="phone">Phone Number</label>
|
|
<input type="tel" class="form-control" id="phone" name="phone" value="{{ old('phone', $user['phone'] ?? '') }}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group mb-3">
|
|
<label for="address">Address</label>
|
|
<textarea class="form-control" id="address" name="address" rows="3">{{ old('address', $user['address'] ?? '') }}</textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">Save Changes</button>
|
|
</form>
|
|
|
|
<hr>
|
|
|
|
<h5 class="mb-3">Change Password</h5>
|
|
<form id="passwordForm" method="POST" action="{{ route('profile.password.update') }}">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="currentPassword">Current Password</label>
|
|
<input type="password" class="form-control" id="currentPassword" name="currentPassword" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="newPassword">New Password</label>
|
|
<input type="password" class="form-control" id="newPassword" name="newPassword" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="confirmPassword">Confirm New Password</label>
|
|
<input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">Update Password</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Profile form validation and submission
|
|
$('#profileForm').validate({
|
|
rules: {
|
|
firstName: {
|
|
required: true,
|
|
minlength: 2
|
|
},
|
|
lastName: {
|
|
required: true,
|
|
minlength: 2
|
|
},
|
|
email: {
|
|
required: true,
|
|
email: true
|
|
},
|
|
phone: {
|
|
pattern: /^[0-9+\-\s()]*$/
|
|
}
|
|
},
|
|
messages: {
|
|
firstName: {
|
|
required: "Please enter your first name",
|
|
minlength: "First name must be at least 2 characters"
|
|
},
|
|
lastName: {
|
|
required: "Please enter your last name",
|
|
minlength: "Last name must be at least 2 characters"
|
|
},
|
|
email: {
|
|
required: "Please enter your email address",
|
|
email: "Please enter a valid email address"
|
|
},
|
|
phone: {
|
|
pattern: "Please enter a valid phone number"
|
|
}
|
|
},
|
|
submitHandler: function(form) {
|
|
$.ajax({
|
|
url: form.action,
|
|
type: form.method,
|
|
data: $(form).serialize(),
|
|
success: function(response) {
|
|
toastr.success('Profile updated successfully');
|
|
},
|
|
error: function(xhr) {
|
|
const errors = xhr.responseJSON.errors;
|
|
Object.keys(errors).forEach(function(key) {
|
|
toastr.error(errors[key][0]);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Password form validation and submission
|
|
$('#passwordForm').validate({
|
|
rules: {
|
|
currentPassword: {
|
|
required: true,
|
|
minlength: 8
|
|
},
|
|
newPassword: {
|
|
required: true,
|
|
minlength: 8
|
|
},
|
|
confirmPassword: {
|
|
required: true,
|
|
equalTo: "#newPassword"
|
|
}
|
|
},
|
|
messages: {
|
|
currentPassword: {
|
|
required: "Please enter your current password",
|
|
minlength: "Password must be at least 8 characters"
|
|
},
|
|
newPassword: {
|
|
required: "Please enter a new password",
|
|
minlength: "Password must be at least 8 characters"
|
|
},
|
|
confirmPassword: {
|
|
required: "Please confirm your new password",
|
|
equalTo: "Passwords do not match"
|
|
}
|
|
},
|
|
submitHandler: function(form) {
|
|
$.ajax({
|
|
url: form.action,
|
|
type: form.method,
|
|
data: $(form).serialize(),
|
|
success: function(response) {
|
|
toastr.success('Password updated successfully');
|
|
form.reset();
|
|
},
|
|
error: function(xhr) {
|
|
const errors = xhr.responseJSON.errors;
|
|
Object.keys(errors).forEach(function(key) {
|
|
toastr.error(errors[key][0]);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Avatar upload
|
|
$('#avatar').change(function() {
|
|
const file = this.files[0];
|
|
if (file) {
|
|
const formData = new FormData();
|
|
formData.append('avatar', file);
|
|
|
|
$.ajax({
|
|
url: '{{ route("profile.avatar.update") }}',
|
|
type: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function(response) {
|
|
toastr.success('Profile picture updated successfully');
|
|
location.reload();
|
|
},
|
|
error: function(xhr) {
|
|
toastr.error('Failed to update profile picture');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
|
|
@push('styles')
|
|
<style>
|
|
.profile-image img {
|
|
border: 5px solid #fff;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
.card {
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
|
}
|
|
</style>
|
|
@endpush |