259 lines
12 KiB
PHP
259 lines
12 KiB
PHP
@extends('layouts.user.app')
|
|
|
|
@section('content')
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="max-w-3xl mx-auto">
|
|
<h1 class="text-2xl font-bold text-maroon mb-8">Pengaturan Akun</h1>
|
|
|
|
<!-- Current Profile Display -->
|
|
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
|
|
<div class="flex items-center space-x-6">
|
|
<div class="shrink-0">
|
|
@if(auth()->user()->profile_picture)
|
|
<img class="h-32 w-32 object-cover rounded-full border-4 border-maroon"
|
|
src="{{ Storage::url(auth()->user()->profile_picture) }}"
|
|
alt="{{ auth()->user()->name }}">
|
|
@else
|
|
<div class="h-32 w-32 rounded-full bg-gray-200 flex items-center justify-center border-4 border-maroon">
|
|
<i class="fas fa-user text-4xl text-gray-400"></i>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-800">{{ auth()->user()->name }}</h2>
|
|
<p class="text-gray-600 mb-2">{{ auth()->user()->email }}</p>
|
|
<p class="text-gray-600">{{ auth()->user()->phone ?? 'Belum ada nomor telepon' }}</p>
|
|
<div class="mt-4 space-x-2">
|
|
<button onclick="openEditProfileModal()" class="bg-maroon text-white px-4 py-2 rounded-md hover:bg-red-900 transition-colors">
|
|
<i class="fas fa-edit mr-2"></i>Edit Profil
|
|
</button>
|
|
<button onclick="openChangePasswordModal()" class="bg-gray-600 text-white px-4 py-2 rounded-md hover:bg-gray-700 transition-colors">
|
|
<i class="fas fa-key mr-2"></i>Ubah Password
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if(session('profile_status'))
|
|
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4"
|
|
x-data="{ show: true }"
|
|
x-show="show"
|
|
x-init="setTimeout(() => show = false, 3000)">
|
|
{{ session('profile_status') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('password_status'))
|
|
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4"
|
|
x-data="{ show: true }"
|
|
x-show="show"
|
|
x-init="setTimeout(() => show = false, 3000)">
|
|
{{ session('password_status') }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Profile Modal -->
|
|
<div id="editProfileModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full">
|
|
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-xl font-semibold text-maroon">Edit Profil</h3>
|
|
<button onclick="closeEditProfileModal()" class="text-gray-600 hover:text-gray-800">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<form action="{{ route('user.profile.update') }}" method="POST" enctype="multipart/form-data" id="profileForm">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<!-- Profile Picture Preview -->
|
|
<div class="mb-6 text-center">
|
|
<div class="mb-4 flex justify-center">
|
|
<div class="relative">
|
|
<div id="profilePreview" class="h-32 w-32 rounded-full border-4 border-maroon overflow-hidden">
|
|
@if(auth()->user()->profile_picture)
|
|
<img class="h-full w-full object-cover"
|
|
src="{{ Storage::url(auth()->user()->profile_picture) }}"
|
|
alt="Preview">
|
|
@else
|
|
<div class="h-full w-full bg-gray-200 flex items-center justify-center">
|
|
<i class="fas fa-user text-4xl text-gray-400"></i>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@if(auth()->user()->profile_picture)
|
|
<button type="button" onclick="deleteProfilePicture()"
|
|
class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<label class="cursor-pointer bg-maroon text-white px-4 py-2 rounded-md hover:bg-red-900 transition-colors">
|
|
<i class="fas fa-camera mr-2"></i>Pilih Foto
|
|
<input type="file" name="profile_picture" id="profile_picture" class="hidden"
|
|
accept="image/png,image/jpeg,image/jpg">
|
|
</label>
|
|
<p class="mt-1 text-sm text-gray-500">PNG, JPG atau JPEG (Maks. 2MB)</p>
|
|
@error('profile_picture')
|
|
<p class="text-red-500 text-sm mt-1">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="name" class="block text-gray-700 font-medium mb-2">Nama</label>
|
|
<input type="text" name="name" id="name" value="{{ old('name', auth()->user()->name) }}"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-maroon focus:border-maroon">
|
|
@error('name')
|
|
<p class="text-red-500 text-sm mt-1">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
|
|
<input type="email" name="email" id="email" value="{{ old('email', auth()->user()->email) }}"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-maroon focus:border-maroon">
|
|
@error('email')
|
|
<p class="text-red-500 text-sm mt-1">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="phone" class="block text-gray-700 font-medium mb-2">Nomor Telepon</label>
|
|
<input type="text" name="phone" id="phone" value="{{ old('phone', auth()->user()->phone) }}"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-maroon focus:border-maroon">
|
|
@error('phone')
|
|
<p class="text-red-500 text-sm mt-1">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-2">
|
|
<button type="button" onclick="closeEditProfileModal()"
|
|
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors">
|
|
Batal
|
|
</button>
|
|
<button type="submit" class="px-4 py-2 bg-maroon text-white rounded-md hover:bg-red-900 transition-colors">
|
|
Simpan Perubahan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Change Password Modal -->
|
|
<div id="changePasswordModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full">
|
|
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-xl font-semibold text-maroon">Ubah Password</h3>
|
|
<button onclick="closeChangePasswordModal()" class="text-gray-600 hover:text-gray-800">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<form action="{{ route('user.password.update') }}" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="mb-4">
|
|
<label for="current_password" class="block text-gray-700 font-medium mb-2">Password Saat Ini</label>
|
|
<input type="password" name="current_password" id="current_password"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-maroon focus:border-maroon">
|
|
@error('current_password')
|
|
<p class="text-red-500 text-sm mt-1">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="password" class="block text-gray-700 font-medium mb-2">Password Baru</label>
|
|
<input type="password" name="password" id="password"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-maroon focus:border-maroon">
|
|
@error('password')
|
|
<p class="text-red-500 text-sm mt-1">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="password_confirmation" class="block text-gray-700 font-medium mb-2">Konfirmasi Password Baru</label>
|
|
<input type="password" name="password_confirmation" id="password_confirmation"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-maroon focus:border-maroon">
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-2">
|
|
<button type="button" onclick="closeChangePasswordModal()"
|
|
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors">
|
|
Batal
|
|
</button>
|
|
<button type="submit" class="px-4 py-2 bg-maroon text-white rounded-md hover:bg-red-900 transition-colors">
|
|
Ubah Password
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden form for deleting profile picture -->
|
|
<form id="delete-picture-form" action="{{ route('user.profile.picture.delete') }}" method="POST" class="hidden">
|
|
@csrf
|
|
@method('DELETE')
|
|
</form>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function openEditProfileModal() {
|
|
document.getElementById('editProfileModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeEditProfileModal() {
|
|
document.getElementById('editProfileModal').classList.add('hidden');
|
|
}
|
|
|
|
function openChangePasswordModal() {
|
|
document.getElementById('changePasswordModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeChangePasswordModal() {
|
|
document.getElementById('changePasswordModal').classList.add('hidden');
|
|
}
|
|
|
|
function deleteProfilePicture() {
|
|
if (confirm('Apakah Anda yakin ingin menghapus foto profil?')) {
|
|
document.getElementById('delete-picture-form').submit();
|
|
}
|
|
}
|
|
|
|
// Live Preview for Profile Picture
|
|
document.getElementById('profile_picture').addEventListener('change', function(e) {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
if (file.size > 2 * 1024 * 1024) {
|
|
alert('Ukuran file terlalu besar. Maksimal 2MB.');
|
|
this.value = '';
|
|
return;
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
const preview = document.getElementById('profilePreview');
|
|
preview.innerHTML = `<img src="${e.target.result}" class="h-full w-full object-cover" alt="Preview">`;
|
|
}
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
|
|
// Close modals when clicking outside
|
|
window.onclick = function(event) {
|
|
const editModal = document.getElementById('editProfileModal');
|
|
const changePasswordModal = document.getElementById('changePasswordModal');
|
|
if (event.target == editModal) {
|
|
closeEditProfileModal();
|
|
}
|
|
if (event.target == changePasswordModal) {
|
|
closeChangePasswordModal();
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|
|
@endsection
|