221 lines
10 KiB
PHP
221 lines
10 KiB
PHP
{{--
|
|
Edit Profile - Professional Bootstrap Design
|
|
Professional Profile Edit Page
|
|
|
|
@author David Valera Melendez <david@valera-melendez.de>
|
|
@created 2025-08-09
|
|
@location Made in Germany 🇩🇪
|
|
--}}
|
|
|
|
@extends('layouts.app')
|
|
|
|
@section('title', 'Edit Profile - Professional Resume Builder')
|
|
@section('page_class', 'profile-edit-page')
|
|
|
|
@section('content')
|
|
<div class="profile-edit-container">
|
|
<!-- Page Header -->
|
|
<section class="page-header">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h1 class="page-title">Edit Profile</h1>
|
|
<p class="page-subtitle">Update your personal information and preferences</p>
|
|
</div>
|
|
<a href="{{ route('profile.show') }}" class="btn secondary-cta">
|
|
<i class="bi bi-arrow-left"></i>
|
|
Back to Profile
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Edit Profile Form -->
|
|
<section class="profile-edit-form">
|
|
<form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="row g-4">
|
|
<!-- Personal Information Card -->
|
|
<div class="col-lg-8">
|
|
<div class="card form-card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="bi bi-person"></i>
|
|
Personal Information
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<!-- Full Name -->
|
|
<div class="col-12">
|
|
<div class="form-floating">
|
|
<input type="text"
|
|
class="form-control @error('name') is-invalid @enderror"
|
|
id="name"
|
|
name="name"
|
|
value="{{ old('name', $user->name) }}"
|
|
placeholder="Full Name"
|
|
required>
|
|
<label for="name">Full Name *</label>
|
|
@error('name')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email -->
|
|
<div class="col-md-6">
|
|
<div class="form-floating">
|
|
<input type="email"
|
|
class="form-control @error('email') is-invalid @enderror"
|
|
id="email"
|
|
name="email"
|
|
value="{{ old('email', $user->email) }}"
|
|
placeholder="Email Address"
|
|
required>
|
|
<label for="email">Email Address *</label>
|
|
@error('email')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phone -->
|
|
<div class="col-md-6">
|
|
<div class="form-floating">
|
|
<input type="tel"
|
|
class="form-control @error('phone') is-invalid @enderror"
|
|
id="phone"
|
|
name="phone"
|
|
value="{{ old('phone', $user->phone) }}"
|
|
placeholder="Phone Number">
|
|
<label for="phone">Phone Number</label>
|
|
@error('phone')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bio -->
|
|
<div class="col-12">
|
|
<div class="form-floating">
|
|
<textarea class="form-control @error('bio') is-invalid @enderror"
|
|
id="bio"
|
|
name="bio"
|
|
style="height: 120px"
|
|
placeholder="Tell us about yourself">{{ old('bio', $user->bio) }}</textarea>
|
|
<label for="bio">About Me</label>
|
|
@error('bio')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-text">
|
|
<i class="bi bi-info-circle"></i>
|
|
Optional: Brief description about yourself (max 1000 characters)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Profile Picture Card -->
|
|
<div class="col-lg-4">
|
|
<div class="card form-card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="bi bi-camera"></i>
|
|
Profile Picture
|
|
</h5>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<div class="profile-avatar-edit">
|
|
@if($user->avatar)
|
|
<img src="{{ Storage::url($user->avatar) }}" alt="{{ $user->name }}" class="current-avatar" id="avatarPreview">
|
|
@else
|
|
<div class="avatar-placeholder" id="avatarPreview">
|
|
<i class="bi bi-person-circle"></i>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="avatar-upload mt-3">
|
|
<input type="file"
|
|
class="form-control @error('avatar') is-invalid @enderror"
|
|
id="avatar"
|
|
name="avatar"
|
|
accept="image/*"
|
|
style="display: none;">
|
|
<button type="button" class="btn primary-cta" onclick="document.getElementById('avatar').click()">
|
|
<i class="bi bi-cloud-upload"></i>
|
|
Choose Photo
|
|
</button>
|
|
@error('avatar')
|
|
<div class="invalid-feedback d-block">{{ $message }}</div>
|
|
@enderror
|
|
<div class="form-text mt-2">
|
|
<i class="bi bi-info-circle"></i>
|
|
JPG, PNG or GIF (max 2MB)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Save Changes Card -->
|
|
<div class="card form-card mt-4">
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
<button type="submit" class="btn primary-cta">
|
|
<i class="bi bi-check-circle"></i>
|
|
Save Changes
|
|
</button>
|
|
<a href="{{ route('profile.show') }}" class="btn btn-outline-secondary">
|
|
<i class="bi bi-x-circle"></i>
|
|
Cancel
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Avatar preview functionality
|
|
const avatarInput = document.getElementById('avatar');
|
|
const avatarPreview = document.getElementById('avatarPreview');
|
|
|
|
if (avatarInput && avatarPreview) {
|
|
avatarInput.addEventListener('change', function(e) {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
avatarPreview.innerHTML = '<img src="' + e.target.result + '" alt="Avatar Preview" class="current-avatar">';
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Form validation feedback
|
|
const form = document.querySelector('form');
|
|
if (form) {
|
|
form.addEventListener('submit', function(e) {
|
|
// Add loading state
|
|
const submitBtn = form.querySelector('button[type="submit"]');
|
|
if (submitBtn) {
|
|
submitBtn.disabled = true;
|
|
submitBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Saving...';
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection
|