126 lines
6.1 KiB
PHP
126 lines
6.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Edit Profil Admin</title>
|
|
<!-- Tailwind CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
|
|
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
|
|
</head>
|
|
|
|
<body class="bg-gradient-to-br from-blue-400 via-white to-blue-200 min-h-screen py-10">
|
|
|
|
<div class="max-w-xl mx-auto bg-white p-8 rounded-2xl shadow-xl border border-gray-200">
|
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Edit Profil Admin</h2>
|
|
|
|
<form action="{{ route('admin.updateProfil') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<!-- Profile Picture -->
|
|
<div class="text-center">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Profil</label>
|
|
<div class="flex justify-center mb-4">
|
|
<img src="{{ asset('assets/admin/admin.jpg') }}" alt="Admin"
|
|
class="w-28 h-28 rounded-full object-cover border border-blue-300 shadow">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Name -->
|
|
<div>
|
|
<label for="name" class="block text-sm font-semibold text-gray-700 mb-1">Nama</label>
|
|
<input type="text" name="name" id="name" value="{{ old('name', Auth::user()->name) }}"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400">
|
|
</div>
|
|
|
|
<!-- Email -->
|
|
<div>
|
|
<label for="email" class="block text-sm font-semibold text-gray-700 mb-1">Email</label>
|
|
<input type="email" name="email" id="email" value="{{ old('email', Auth::user()->email) }}"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400">
|
|
</div>
|
|
|
|
<!-- Password Baru -->
|
|
<div class="relative mb-4">
|
|
<label for="password" class="block text-gray-700 font-semibold mb-1">Password Baru</label>
|
|
|
|
<input type="password" id="password" name="password" placeholder="Kosongkan jika tidak ingin mengganti"
|
|
class="w-full px-4 py-2 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400">
|
|
|
|
<!-- Tombol Toggle Mata -->
|
|
<button type="button" onclick="togglePassword('password')"
|
|
class="absolute top-9 right-3 text-gray-600 hover:text-gray-800 focus:outline-none">
|
|
<svg id="eyeIcon-password" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Konfirmasi Password -->
|
|
<div class="relative mb-4">
|
|
<label for="password_confirmation" class="block text-sm font-semibold text-gray-700 mb-1">Konfirmasi Password</label>
|
|
|
|
<input type="password" id="password_confirmation" name="password_confirmation"
|
|
class="w-full px-4 py-2 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400">
|
|
|
|
<!-- Tombol Toggle Mata -->
|
|
<button type="button" onclick="togglePassword('password_confirmation')"
|
|
class="absolute top-9 right-3 text-gray-600 hover:text-gray-800 focus:outline-none">
|
|
<svg id="eyeIcon-password_confirmation" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Script Toggle -->
|
|
<script>
|
|
function togglePassword(id) {
|
|
const input = document.getElementById(id);
|
|
const icon = document.getElementById('eyeIcon-' + id);
|
|
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.innerHTML = `
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.477 0-8.268-2.943-9.542-7a9.955 9.955 0 013.276-4.419m3.085-1.676A9.958 9.958 0 0112 5c4.478 0 8.268 2.943 9.542 7a9.957 9.957 0 01-4.217 5.168M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 3l18 18"/>
|
|
`;
|
|
} else {
|
|
input.type = 'password';
|
|
icon.innerHTML = `
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
|
`;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Buttons -->
|
|
<div class="flex flex-col sm:flex-row justify-between gap-4 mt-6">
|
|
<a href="{{ url('/dashboard') }}"
|
|
class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-3 rounded-full text-center shadow transition duration-200">
|
|
<i class="fa-solid fa-arrow-left mr-2"></i>Kembali
|
|
</a>
|
|
<button type="submit"
|
|
class="bg-blue-600 hover:bg-green-700 text-white px-6 py-3 rounded-full text-center shadow transition duration-200">
|
|
<i class="fa-solid fa-save mr-2"></i>Simpan Perubahan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|