233 lines
16 KiB
PHP
233 lines
16 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="min-h-screen bg-gradient-to-br from-[#63BE9A] to-[#06B3BF] p-6">
|
|
<div class="max-w-5xl mx-auto relative mb-6">
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2">
|
|
<h2 class="text-3xl font-bold text-black drop-shadow-md">Profile Admin</h2>
|
|
<nav class="text-gray-700 text-sm bg-white px-4 py-2 rounded-xl shadow-md border border-white/40">
|
|
<a href="{{ route('dashboard') }}" class="text-[#06B3BF] font-semibold hover:underline">Dashboard</a> / <span class="font-medium">Profil</span>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alert Messages -->
|
|
@if(session('success'))
|
|
<div class="max-w-5xl mx-auto mb-6 p-4 bg-white border-l-4 border-green-500 rounded-xl shadow-lg flex items-center">
|
|
<div class="bg-green-100 p-2 rounded-full mr-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<p class="text-green-700 font-medium">{{ session('success') }}</p>
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('info'))
|
|
<div class="max-w-5xl mx-auto mb-6 p-4 bg-white border-l-4 border-blue-500 rounded-xl shadow-lg flex items-center">
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<p class="text-blue-700 font-medium">{{ session('info') }}</p>
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
<div class="max-w-5xl mx-auto mb-6 p-4 bg-white border-l-4 border-red-500 rounded-xl shadow-lg flex items-center">
|
|
<div class="bg-red-100 p-2 rounded-full mr-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</div>
|
|
<p class="text-red-700 font-medium">{{ session('error') }}</p>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Main Profile Card -->
|
|
<div class="w-full max-w-5xl bg-white/80 backdrop-blur-md rounded-2xl shadow-xl p-6 md:p-8 mx-auto border border-white/40">
|
|
<form action="{{ route('profile.update') }}" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="flex flex-col md:flex-row gap-8">
|
|
<!-- Left column - Admin Profile Card -->
|
|
<div class="w-full md:w-1/3">
|
|
<div class="bg-gradient-to-br from-white to-gray-50 p-6 rounded-2xl border border-gray-100 shadow-lg">
|
|
<div class="flex flex-col items-center">
|
|
<!-- Profile Image Container -->
|
|
<div class="group relative w-40 h-40 rounded-full overflow-hidden border-4 border-[#63BE9A]/30 shadow-lg mb-6 flex items-center justify-center bg-gradient-to-br from-[#63BE9A]/20 to-[#06B3BF]/20 hover:from-[#63BE9A]/30 hover:to-[#06B3BF]/30 transition duration-300">
|
|
<span class="text-7xl group-hover:scale-110 transition duration-300">👤</span>
|
|
</div>
|
|
|
|
<!-- Name & Email -->
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-1">{{ $profile->nama }}</h3>
|
|
<p class="text-gray-500 mb-3">{{ $profile->email }}</p>
|
|
|
|
<!-- Admin Badge -->
|
|
<div class="px-4 py-2 bg-gradient-to-r from-[#63BE9A] to-[#06B3BF] text-white rounded-full text-sm font-bold shadow-md">
|
|
Administrator
|
|
</div>
|
|
|
|
<!-- Last Login Info -->
|
|
<div class="mt-6 pt-4 border-t border-gray-200 w-full text-center">
|
|
<p class="text-sm text-gray-500">Terakhir login</p>
|
|
<p class="font-medium text-gray-700">{{ now()->format('d M Y, H:i') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password Change Section -->
|
|
<div class="bg-gradient-to-br from-white to-gray-50 p-6 rounded-2xl border border-gray-100 shadow-lg mt-6">
|
|
<h3 class="text-lg font-bold mb-4 text-[#06B3BF] flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
Ubah Password
|
|
</h3>
|
|
|
|
<div class="space-y-4">
|
|
<!-- Password Field -->
|
|
<div class="group">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Password Baru</label>
|
|
<input type="password" name="password" class="w-full p-3 bg-white border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#06B3BF] focus:border-transparent transition-all duration-300 shadow-sm @error('password') border-red-500 @enderror">
|
|
@error('password')
|
|
<p class="text-red-500 text-xs mt-1">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Confirm Password Field -->
|
|
<div class="group">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Konfirmasi Password</label>
|
|
<input type="password" name="password_confirmation" class="w-full p-3 bg-white border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#06B3BF] focus:border-transparent transition-all duration-300 shadow-sm">
|
|
</div>
|
|
|
|
<button type="submit" class="w-full mt-2 py-2 px-4 bg-gradient-to-r from-[#63BE9A] to-[#06B3BF] text-white rounded-xl font-medium shadow-md hover:shadow-lg hover:opacity-90 transition-all duration-300 flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Simpan Password
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right column - Profile Details Form -->
|
|
<div class="w-full md:w-2/3">
|
|
<div class="bg-gradient-to-br from-white to-gray-50 p-6 rounded-2xl border border-gray-100 shadow-lg">
|
|
<h3 class="text-xl font-bold mb-6 text-[#06B3BF] flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
Informasi Profil
|
|
</h3>
|
|
|
|
<div class="space-y-5">
|
|
<!-- NIK Field -->
|
|
<div class="group">
|
|
<label class="block text-sm font-bold text-gray-700 mb-2 flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-[#06B3BF]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
|
|
</svg>
|
|
NIK
|
|
</label>
|
|
<div class="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl shadow-sm text-gray-700 font-medium">
|
|
{{ $profile->nik }}
|
|
<input type="hidden" name="nik" value="{{ $profile->nik }}">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Nama Field -->
|
|
<div class="group">
|
|
<label class="block text-sm font-bold text-gray-700 mb-2 flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-[#06B3BF]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
Nama Lengkap
|
|
</label>
|
|
<div class="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl shadow-sm text-gray-700 font-medium">
|
|
{{ $profile->nama }}
|
|
<input type="hidden" name="nama" value="{{ $profile->nama }}">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Field -->
|
|
<div class="group">
|
|
<label class="block text-sm font-bold text-gray-700 mb-2 flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-[#06B3BF]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
Email
|
|
</label>
|
|
<div class="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl shadow-sm text-gray-700 font-medium">
|
|
{{ $profile->email }}
|
|
<input type="hidden" name="email" value="{{ $profile->email }}">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phone Field -->
|
|
<div class="group">
|
|
<label class="block text-sm font-bold text-gray-700 mb-2 flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-[#06B3BF]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
|
</svg>
|
|
Nomor Telepon
|
|
</label>
|
|
<div class="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl shadow-sm text-gray-700 font-medium">
|
|
{{ $profile->no_telp ?? '-' }}
|
|
<input type="hidden" name="no_telp" value="{{ $profile->no_telp }}">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Address Field -->
|
|
<div class="group">
|
|
<label class="block text-sm font-bold text-gray-700 mb-2 flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-[#06B3BF]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
Alamat
|
|
</label>
|
|
<div class="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl shadow-sm text-gray-700 font-medium min-h-[72px]">
|
|
{{ $profile->alamat ?? '-' }}
|
|
<input type="hidden" name="alamat" value="{{ $profile->alamat }}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 flex justify-end gap-3">
|
|
<a href="{{ route('dashboard') }}" class="flex items-center justify-center px-6 py-3 bg-gray-600 text-white rounded-xl font-bold shadow-md hover:bg-gray-700 transition-all duration-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
Kembali
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
// Add any profile-specific JavaScript here
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Example: Adding subtle animations to form fields on focus
|
|
const formInputs = document.querySelectorAll('input, textarea');
|
|
formInputs.forEach(input => {
|
|
input.addEventListener('focus', function() {
|
|
this.parentElement.classList.add('scale-[1.01]', 'transform', 'transition-all', 'duration-300');
|
|
});
|
|
input.addEventListener('blur', function() {
|
|
this.parentElement.classList.remove('scale-[1.01]', 'transform');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
|
|
@endsection
|