332 lines
16 KiB
PHP
332 lines
16 KiB
PHP
{{-- resources/views/profile/edit.blade.php --}}
|
|
@extends('layouts.app')
|
|
|
|
@section('title', 'Profile - LearnMood')
|
|
|
|
@section('content')
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 pb-20 md:pb-0">
|
|
|
|
<!-- Header -->
|
|
<div class="mb-6">
|
|
<h2 class="text-xl md:text-2xl font-bold text-gray-800">👤 Profile</h2>
|
|
<p class="text-sm md:text-base text-gray-500">Kelola informasi akun Anda</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Left Column - Avatar & Info -->
|
|
<div class="lg:col-span-1">
|
|
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6">
|
|
<div class="flex flex-col items-center">
|
|
<!-- Avatar -->
|
|
<div class="relative group">
|
|
<div class="w-24 h-24 md:w-32 md:h-32 rounded-full overflow-hidden border-4 border-purple-100 shadow-lg">
|
|
@if($user->avatar && file_exists(public_path('avatars/' . $user->avatar)))
|
|
<img src="{{ asset('avatars/' . $user->avatar) }}"
|
|
alt="{{ $user->name }}"
|
|
class="w-full h-full object-cover">
|
|
@else
|
|
<div class="w-full h-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white text-3xl md:text-4xl font-bold">
|
|
{{ substr($user->name, 0, 1) }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Upload button -->
|
|
<label for="avatarInput"
|
|
class="absolute bottom-0 right-0 bg-purple-600 text-white p-2 rounded-full shadow-lg hover:bg-purple-700 transition cursor-pointer">
|
|
<svg class="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
</label>
|
|
|
|
<form id="avatarForm" action="{{ route('profile.avatar') }}" method="POST" enctype="multipart/form-data" class="hidden">
|
|
@csrf
|
|
<input type="file" id="avatarInput" name="avatar" accept="image/*" onchange="document.getElementById('avatarForm').submit()">
|
|
</form>
|
|
</div>
|
|
|
|
<!-- User Info -->
|
|
<h3 class="text-lg md:text-xl font-bold text-gray-800 mt-4">{{ $user->name }}</h3>
|
|
<p class="text-sm text-gray-500">{{ $user->email }}</p>
|
|
|
|
<!-- Role Badge -->
|
|
<span class="mt-2 px-3 py-1 text-xs font-medium rounded-full
|
|
@if($user->isSiswa()) bg-green-100 text-green-700
|
|
@else bg-purple-100 text-purple-700 @endif">
|
|
{{ $user->isSiswa() ? 'Siswa' : 'Orang Tua' }}
|
|
</span>
|
|
|
|
<!-- Joined Date -->
|
|
<div class="mt-4 text-center text-xs text-gray-400">
|
|
<i class="far fa-calendar-alt mr-1"></i>
|
|
Member since {{ $user->created_at->format('d M Y') }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Stats untuk Siswa -->
|
|
@if($user->isSiswa() && isset($stats))
|
|
<div class="mt-6 pt-4 border-t border-gray-100">
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3">📊 Statistik Cepat</h4>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<div class="bg-gray-50 p-2 rounded-lg text-center">
|
|
<span class="text-xs text-gray-500">Total Aktivitas</span>
|
|
<p class="text-lg font-bold text-blue-600">{{ $stats['total_aktivitas'] }}</p>
|
|
</div>
|
|
<div class="bg-gray-50 p-2 rounded-lg text-center">
|
|
<span class="text-xs text-gray-500">Total Durasi</span>
|
|
<p class="text-lg font-bold text-green-600">{{ $stats['total_durasi'] }} mnt</p>
|
|
</div>
|
|
<div class="bg-gray-50 p-2 rounded-lg text-center col-span-2">
|
|
<span class="text-xs text-gray-500">Konsistensi</span>
|
|
<div class="flex items-center justify-center gap-2">
|
|
<p class="text-lg font-bold text-purple-600">{{ $stats['konsistensi'] }}%</p>
|
|
<div class="w-20 bg-gray-200 rounded-full h-1.5">
|
|
<div class="bg-purple-600 h-1.5 rounded-full" style="width: {{ $stats['konsistensi'] }}%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Quick Stats untuk Orang Tua -->
|
|
@if($user->isOrangTua() && isset($stats))
|
|
<div class="mt-6 pt-4 border-t border-gray-100">
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3">📊 Statistik Cepat</h4>
|
|
<div class="bg-gray-50 p-3 rounded-lg text-center">
|
|
<span class="text-xs text-gray-500">Total Anak Terhubung</span>
|
|
<p class="text-2xl font-bold text-purple-600">{{ $stats['total_anak'] }}</p>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column - Edit Forms -->
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<!-- Edit Profile Form -->
|
|
<div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
|
|
<div class="px-4 md:px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-gray-100/50">
|
|
<h3 class="font-semibold text-gray-800 flex items-center gap-2">
|
|
<i class="fas fa-user-edit text-blue-600"></i>
|
|
Edit Profile
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="p-4 md:p-6">
|
|
<form method="POST" action="{{ route('profile.update') }}" class="space-y-4">
|
|
@csrf
|
|
@method('PATCH')
|
|
|
|
<!-- Name -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
|
Nama Lengkap
|
|
</label>
|
|
<input type="text"
|
|
name="name"
|
|
value="{{ old('name', $user->name) }}"
|
|
class="w-full px-3 md:px-4 py-2 md:py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
|
required>
|
|
@error('name')
|
|
<p class="text-sm text-red-600 mt-1">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Email -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
|
Email
|
|
</label>
|
|
<input type="email"
|
|
name="email"
|
|
value="{{ old('email', $user->email) }}"
|
|
class="w-full px-3 md:px-4 py-2 md:py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
|
required>
|
|
@error('email')
|
|
<p class="text-sm text-red-600 mt-1">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<button type="submit"
|
|
class="px-4 md:px-6 py-2 md:py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm">
|
|
<i class="fas fa-save mr-2"></i> Simpan Perubahan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Change Password Form -->
|
|
<div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
|
|
<div class="px-4 md:px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-gray-100/50">
|
|
<h3 class="font-semibold text-gray-800 flex items-center gap-2">
|
|
<i class="fas fa-lock text-green-600"></i>
|
|
Ubah Password
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="p-4 md:p-6">
|
|
<form method="POST" action="{{ route('profile.password') }}" class="space-y-4">
|
|
@csrf
|
|
|
|
<!-- Current Password -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
|
Password Saat Ini
|
|
</label>
|
|
<input type="password"
|
|
name="current_password"
|
|
class="w-full px-3 md:px-4 py-2 md:py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
|
|
required>
|
|
</div>
|
|
|
|
<!-- New Password -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
|
Password Baru
|
|
</label>
|
|
<input type="password"
|
|
name="new_password"
|
|
class="w-full px-3 md:px-4 py-2 md:py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
|
|
required>
|
|
<p class="text-xs text-gray-500 mt-1">Minimal 8 karakter</p>
|
|
</div>
|
|
|
|
<!-- Confirm New Password -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
|
Konfirmasi Password Baru
|
|
</label>
|
|
<input type="password"
|
|
name="new_password_confirmation"
|
|
class="w-full px-3 md:px-4 py-2 md:py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
|
|
required>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<button type="submit"
|
|
class="px-4 md:px-6 py-2 md:py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm">
|
|
<i class="fas fa-key mr-2"></i> Ubah Password
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Danger Zone - Delete Account -->
|
|
<div class="bg-white rounded-xl border border-red-100 shadow-sm overflow-hidden">
|
|
<div class="px-4 md:px-6 py-4 border-b border-red-100 bg-gradient-to-r from-red-50 to-red-100/50">
|
|
<h3 class="font-semibold text-red-800 flex items-center gap-2">
|
|
<i class="fas fa-exclamation-triangle text-red-600"></i>
|
|
Danger Zone
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="p-4 md:p-6">
|
|
<p class="text-sm text-gray-600 mb-4">
|
|
Setelah menghapus akun, semua data Anda akan hilang permanen.
|
|
Tindakan ini tidak dapat dibatalkan.
|
|
</p>
|
|
|
|
<button onclick="showDeleteModal()"
|
|
class="px-4 md:px-6 py-2 md:py-2.5 bg-red-600 text-white rounded-lg hover:bg-red-700 transition text-sm">
|
|
<i class="fas fa-trash-alt mr-2"></i> Hapus Akun
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Account Modal -->
|
|
<div id="deleteModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50 px-4">
|
|
<div class="bg-white rounded-xl max-w-md w-full p-6 shadow-xl">
|
|
<div class="text-center mb-4">
|
|
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<i class="fas fa-exclamation-triangle text-red-600 text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-800">Hapus Akun?</h3>
|
|
<p class="text-sm text-gray-500 mt-2">
|
|
Tindakan ini akan menghapus semua data Anda secara permanen.
|
|
Masukkan password Anda untuk konfirmasi.
|
|
</p>
|
|
</div>
|
|
|
|
<form method="POST" action="{{ route('profile.destroy') }}" class="space-y-4">
|
|
@csrf
|
|
@method('DELETE')
|
|
|
|
<div>
|
|
<input type="password"
|
|
name="password"
|
|
placeholder="Masukkan password Anda"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-sm"
|
|
required>
|
|
</div>
|
|
|
|
<div class="flex gap-3">
|
|
<button type="button"
|
|
onclick="hideDeleteModal()"
|
|
class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition text-sm">
|
|
Batal
|
|
</button>
|
|
<button type="submit"
|
|
class="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition text-sm">
|
|
Ya, Hapus Akun
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Modal functions
|
|
function showDeleteModal() {
|
|
document.getElementById('deleteModal').classList.remove('hidden');
|
|
document.getElementById('deleteModal').classList.add('flex');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function hideDeleteModal() {
|
|
document.getElementById('deleteModal').classList.add('hidden');
|
|
document.getElementById('deleteModal').classList.remove('flex');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
document.getElementById('deleteModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
hideDeleteModal();
|
|
}
|
|
});
|
|
|
|
// Close modal with ESC key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
hideDeleteModal();
|
|
}
|
|
});
|
|
|
|
// Preview avatar before upload
|
|
document.getElementById('avatarInput').addEventListener('change', function(e) {
|
|
if (this.files && this.files[0]) {
|
|
// Optional: preview before upload
|
|
// You can add image preview here if needed
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
/* Mobile optimizations */
|
|
@media (max-width: 640px) {
|
|
.modal-content {
|
|
margin: 1rem;
|
|
max-height: calc(100vh - 2rem);
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
</style>
|
|
@endsection |