210 lines
11 KiB
PHP
210 lines
11 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('content')
|
|
|
|
<form id="form" class="space-y-4" enctype="multipart/form-data">
|
|
<div class="flex">
|
|
<div class="w-1/4">
|
|
<div class="relative w-full h-[250px] bg-white p-3 rounded-lg overflow-hidden">
|
|
<input value="{{ $data['content']->foto ?? ''}}" type="file" id="image" name="image" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" onchange="previewImage(this)">
|
|
<label for="image" id="image-label" class="absolute inset-0 flex items-center justify-center w-full h-full bg-[rgba(0,0,0,0.5)] text-white cursor-pointer hover:bg-[rgba(0,0,0,0.7)] transition duration-300 ease-in-out hover:opacity-75" style="background-size: cover; background-position: center;">
|
|
<span id="remove-image" class="absolute p-2 top-0 right-0 mt-2 mr-2 bg-gray-800 rounded-lg text-white cursor-pointer hidden">×</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z" />
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="w-full ml-5">
|
|
<input type="text" id="id" name="id" hidden value="{{ $data['content']->id ?? '' }}">
|
|
<div class="w-1/2">
|
|
<label for="name" class="block font-medium text-gray-700">Nama</label>
|
|
<input type="text" id="name" name="name" placeholder="Masukan Nama" class="mt-1 p-2 border border-gray-300 rounded-lg w-full" value="{{ $data['content']->name ?? ''}}" required>
|
|
</div>
|
|
<div class="w-1/2 mt-4">
|
|
<label for="email" class="block font-medium text-gray-700">Email</label>
|
|
<input type="email" id="email" name="email" placeholder="Masukan Email" class="mt-1 p-2 border border-gray-300 rounded-lg w-full" value="{{ $data['content']->email ?? ''}}" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-left">
|
|
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg shadow-lg hover:bg-blue-600 transition-colors duration-300">Simpan</button>
|
|
</div>
|
|
</form>
|
|
|
|
<h1 class="mt-10 font-semibold text-2xl">Ganti Password</h1>
|
|
<form id="formPassword" class="space-y-4 mt-2" enctype="multipart/form-data">
|
|
<div class="w-1/2 relative">
|
|
<label for="old_password" class="block font-medium text-gray-700">Password Lama</label>
|
|
<input type="password" id="old_password" name="old_password" placeholder="Masukan Password" class="mt-1 p-2 border border-gray-300 rounded-lg w-full" required>
|
|
<span class="absolute top-0 bottom-0 mt-5 -mb-2 right-0 flex items-center pr-3" onclick="togglePasswordVisibility('old_password', this)">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 cursor-pointer text-gray-600">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="w-1/2 relative">
|
|
<label for="password" class="block font-medium text-gray-700">Password Baru</label>
|
|
<input type="password" id="password" name="password" placeholder="Masukan Password" class="mt-1 p-2 border border-gray-300 rounded-lg w-full" required>
|
|
<span class="absolute top-0 bottom-0 mt-5 -mb-2 right-0 flex items-center pr-3" onclick="togglePasswordVisibility('password', this)">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 cursor-pointer text-gray-600">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="w-1/2 relative">
|
|
<label for="password_confirmation" class="block font-medium text-gray-700">Konfirmasi Password Baru</label>
|
|
<input type="password" id="password_confirmation" name="password_confirmation" placeholder="Masukan Konfirmasi Password" class="mt-1 p-2 border border-gray-300 rounded-lg w-full" required>
|
|
<span class="absolute top-0 bottom-0 mt-5 -mb-2 right-0 flex items-center pr-3" onclick="togglePasswordVisibility('password_confirmation', this)">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 cursor-pointer text-gray-600">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="text-left">
|
|
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg shadow-lg hover:bg-blue-600 transition-colors duration-300">Simpan</button>
|
|
</div>
|
|
</form>
|
|
@endsection
|
|
|
|
@section('script')
|
|
<script>
|
|
function togglePasswordVisibility(inputId, icon) {
|
|
var input = document.getElementById(inputId);
|
|
var eyeIcon = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 cursor-pointer">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
|
</svg>
|
|
`;
|
|
|
|
var eyeSlashIcon = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 cursor-pointer">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
|
|
</svg>
|
|
`;
|
|
|
|
if (input.type === "password") {
|
|
input.type = "text";
|
|
icon.innerHTML = eyeSlashIcon;
|
|
} else {
|
|
input.type = "password";
|
|
icon.innerHTML = eyeIcon;
|
|
}
|
|
}
|
|
|
|
function previewImage(input) {
|
|
const label = document.getElementById('image-label');
|
|
const removeButton = document.getElementById('remove-image');
|
|
const file = input.files[0];
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = function(e) {
|
|
label.style.backgroundImage = `url(${e.target.result})`;
|
|
removeButton.style.display = 'block';
|
|
};
|
|
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
document.getElementById('remove-image').addEventListener('click', function() {
|
|
const label = document.getElementById('image-label');
|
|
const removeButton = document.getElementById('remove-image');
|
|
const fileInput = document.getElementById('image');
|
|
|
|
label.style.backgroundImage = '';
|
|
fileInput.value = '';
|
|
removeButton.style.display = 'none';
|
|
});
|
|
|
|
async function submit(formData) {
|
|
try {
|
|
const response = await $.ajax({
|
|
url: '{{ route('profile') }}',
|
|
type: 'POST',
|
|
data: formData,
|
|
contentType: false,
|
|
processData: false,
|
|
dataType: 'json',
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
}
|
|
});
|
|
|
|
if (response && response.code === 200) {
|
|
alert(response.message);
|
|
window.location.href = '{{ route('profile')}}';
|
|
} else {
|
|
alert(response.message);
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
alert('An error occurred while submitting the form.');
|
|
}
|
|
}
|
|
|
|
async function submitPassword(formData) {
|
|
try {
|
|
const response = await $.ajax({
|
|
url: '{{ route('password.update') }}',
|
|
type: 'POST',
|
|
data: formData,
|
|
contentType: false,
|
|
processData: false,
|
|
dataType: 'json',
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
}
|
|
});
|
|
|
|
if (response && response.code === 200) {
|
|
alert(response.message);
|
|
window.location.href = '{{ route('profile')}}';
|
|
} else {
|
|
alert(response.message);
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
alert('An error occurred while submitting the form.');
|
|
}
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
function displayExistingImage(imageUrl) {
|
|
const label = document.getElementById('image-label');
|
|
label.style.backgroundImage = `url(${imageUrl})`;
|
|
|
|
const removeButton = document.getElementById('remove-image');
|
|
removeButton.style.display = 'block';
|
|
}
|
|
|
|
const imageUrl = '{{ route('foto_user', $data['content']->img) }}';
|
|
displayExistingImage(imageUrl);
|
|
|
|
$('#form').submit(function(event) {
|
|
event.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
|
|
const imageInput = $('#image')[0];
|
|
if (imageInput.files && imageInput.files[0]) {
|
|
formData.append('image', imageInput.files[0]);
|
|
}
|
|
|
|
submit(formData);
|
|
});
|
|
|
|
$('#formPassword').submit(function(event) {
|
|
event.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
|
|
submitPassword(formData);
|
|
});
|
|
});
|
|
</script>
|
|
@endsection |