285 lines
15 KiB
PHP
285 lines
15 KiB
PHP
@extends('layouts.app')
|
|
@section('title', 'Profil')
|
|
@section('page-title', 'Profil Saya')
|
|
|
|
@section('content')
|
|
<div class="max-w-2xl mx-auto space-y-5">
|
|
|
|
@if(session('status'))
|
|
<div class="px-4 py-3 rounded-xl text-sm font-medium flex items-center gap-2"
|
|
style="background:#f0fdf4;color:#16a34a;border:1px solid #86efac;">
|
|
<i class="fas fa-check-circle"></i> {{ session('status') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if($errors->any())
|
|
<div class="px-4 py-3 rounded-xl text-sm font-medium"
|
|
style="background:#fff0f0;color:#dc2626;border:1px solid #fca5a5;">
|
|
<i class="fas fa-exclamation-circle mr-1"></i> {{ $errors->first() }}
|
|
</div>
|
|
@endif
|
|
|
|
{{-- CARD 1: PROFIL --}}
|
|
<div class="bg-white rounded-2xl border border-[#ede8df]" style="box-shadow:0 4px 16px rgba(26,58,42,.08);">
|
|
<div class="p-6" style="border-bottom:1px solid #ede8df;">
|
|
<h3 class="font-bold text-base" style="font-family:'Playfair Display',serif;color:#1a3a2a;">Profil</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data">
|
|
@csrf
|
|
|
|
{{-- Avatar --}}
|
|
<div class="flex items-center gap-5 mb-6">
|
|
<div class="relative">
|
|
@if($user->photo)
|
|
<img src="{{ url('storage/' . $user->photo) }}"
|
|
class="w-20 h-20 rounded-full object-cover"
|
|
style="border:3px solid #b7ddc4;">
|
|
@else
|
|
<div class="w-20 h-20 rounded-full text-white flex items-center justify-center text-2xl font-bold"
|
|
style="background:linear-gradient(135deg,#40916c,#2d6a4f);border:3px solid #b7ddc4;">
|
|
{{ strtoupper(substr($user->name, 0, 1)) }}
|
|
</div>
|
|
@endif
|
|
<label class="absolute -bottom-1 -right-1 w-7 h-7 rounded-full flex items-center justify-center cursor-pointer"
|
|
style="background:#2d6a4f;border:2px solid white;">
|
|
<i class="fas fa-camera text-white" style="font-size:.6rem;"></i>
|
|
<input type="file" name="photo" class="hidden" accept="image/*" onchange="this.form.submit()">
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-base" style="color:#1a3a2a;">{{ $user->name }}</p>
|
|
<p class="text-sm" style="color:#5a7a67;">{{ $user->email }}</p>
|
|
<span class="inline-flex items-center gap-1 mt-1 px-2 py-0.5 rounded-full text-xs font-semibold"
|
|
style="background:{{ $user->role === 'admin' ? '#d8f3dc' : '#e0f0ff' }};color:{{ $user->role === 'admin' ? '#2d6a4f' : '#2563eb' }};">
|
|
<i class="fas {{ $user->role === 'admin' ? 'fa-user-tie' : 'fa-seedling' }}"></i>
|
|
{{ $user->role === 'admin' ? 'Ahli Tanaman' : 'Petani' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Nama --}}
|
|
<div class="mb-4">
|
|
<label class="block text-xs font-semibold uppercase tracking-wider mb-1.5" style="color:#5a7a67;">Nama</label>
|
|
<input type="text" name="name" value="{{ old('name', $user->name) }}"
|
|
class="w-full px-4 py-3 rounded-xl border text-sm"
|
|
style="border-color:#ede8df;color:#1a3a2a;outline:none;">
|
|
</div>
|
|
|
|
{{-- Email --}}
|
|
<div class="mb-5">
|
|
<label class="block text-xs font-semibold uppercase tracking-wider mb-1.5" style="color:#5a7a67;">Email</label>
|
|
<input type="email" name="email" value="{{ old('email', $user->email) }}"
|
|
class="w-full px-4 py-3 rounded-xl border text-sm"
|
|
style="border-color:#ede8df;color:#1a3a2a;outline:none;">
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="px-6 py-2.5 rounded-xl text-sm font-semibold text-white transition"
|
|
style="background:#2d6a4f;"
|
|
onmouseover="this.style.background='#1a3a2a'" onmouseout="this.style.background='#2d6a4f'">
|
|
Simpan Perubahan
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- CARD 2: PENGATURAN AKUN --}}
|
|
<div class="bg-white rounded-2xl border border-[#ede8df]" style="box-shadow:0 4px 16px rgba(26,58,42,.08);">
|
|
<div class="p-6" style="border-bottom:1px solid #ede8df;">
|
|
<h3 class="font-bold text-base" style="font-family:'Playfair Display',serif;color:#1a3a2a;">Pengaturan Akun</h3>
|
|
<p class="text-xs mt-0.5" style="color:#8fa89a;">Keamanan akun dan akses</p>
|
|
</div>
|
|
<div class="divide-y divide-[#ede8df]">
|
|
|
|
{{-- Ubah Password --}}
|
|
<div class="p-5 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background:#f0fdf4;">
|
|
<i class="fas fa-lock text-sm" style="color:#2d6a4f;"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-semibold" style="color:#1a3a2a;">Ubah Kata Sandi</p>
|
|
<p class="text-xs" style="color:#8fa89a;">Perbarui password akun kamu</p>
|
|
</div>
|
|
</div>
|
|
<a href="{{ route('password.email') }}"
|
|
class="px-4 py-2 rounded-xl text-xs font-semibold transition"
|
|
style="background:#f0fdf4;color:#2d6a4f;border:1px solid #b7ddc4;"
|
|
onmouseover="this.style.background='#d8f3dc'" onmouseout="this.style.background='#f0fdf4'">
|
|
Ubah
|
|
</a>
|
|
</div>
|
|
|
|
{{-- Manajemen Perangkat --}}
|
|
<div class="p-5 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background:#e0f0ff;">
|
|
<i class="fas fa-desktop text-sm" style="color:#2563eb;"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-semibold" style="color:#1a3a2a;">Manajemen Perangkat</p>
|
|
<p class="text-xs" style="color:#8fa89a;">Lihat perangkat yang mengakses akun</p>
|
|
</div>
|
|
</div>
|
|
<button onclick="openDeviceModal()"
|
|
class="px-4 py-2 rounded-xl text-xs font-semibold transition"
|
|
style="background:#e0f0ff;color:#2563eb;border:1px solid #93c5fd;"
|
|
onmouseover="this.style.background='#bfdbfe'" onmouseout="this.style.background='#e0f0ff'">
|
|
Lihat
|
|
</button>
|
|
</div>
|
|
|
|
{{-- Hapus Akun --}}
|
|
<div class="p-5 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background:#fff0f0;">
|
|
<i class="fas fa-user-times text-sm" style="color:#dc2626;"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-semibold" style="color:#1a3a2a;">Hapus Akun</p>
|
|
<p class="text-xs" style="color:#8fa89a;">Hapus akun dan semua data kamu secara permanen</p>
|
|
</div>
|
|
</div>
|
|
<button onclick="openDeleteModal()"
|
|
class="px-4 py-2 rounded-xl text-xs font-semibold transition"
|
|
style="background:#fff0f0;color:#dc2626;border:1px solid #fca5a5;"
|
|
onmouseover="this.style.background='#fee2e2'" onmouseout="this.style.background='#fff0f0'">
|
|
Hapus
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- CARD 3: LAIN-LAIN --}}
|
|
<div class="bg-white rounded-2xl border border-[#ede8df]" style="box-shadow:0 4px 16px rgba(26,58,42,.08);">
|
|
<div class="p-6" style="border-bottom:1px solid #ede8df;">
|
|
<h3 class="font-bold text-base" style="font-family:'Playfair Display',serif;color:#1a3a2a;">Lain-lain</h3>
|
|
</div>
|
|
<div class="divide-y divide-[#ede8df]">
|
|
|
|
{{-- Logout --}}
|
|
<div class="p-5 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background:#f8f4ee;">
|
|
<i class="fas fa-sign-out-alt text-sm" style="color:#5a7a67;"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-semibold" style="color:#1a3a2a;">Logout</p>
|
|
<p class="text-xs" style="color:#8fa89a;">Keluar dari akun ini</p>
|
|
</div>
|
|
</div>
|
|
<form method="POST" action="{{ route('logout') }}">
|
|
@csrf
|
|
<button type="submit"
|
|
class="px-4 py-2 rounded-xl text-xs font-semibold transition"
|
|
style="background:#f8f4ee;color:#5a7a67;border:1px solid #ede8df;"
|
|
onmouseover="this.style.background='#ede8df'" onmouseout="this.style.background='#f8f4ee'">
|
|
Logout
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{{-- Bantuan --}}
|
|
<div class="p-5 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background:#f0e8ff;">
|
|
<i class="fas fa-question-circle text-sm" style="color:#7c3aed;"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-semibold" style="color:#1a3a2a;">Bantuan & Dukungan</p>
|
|
<p class="text-xs" style="color:#8fa89a;">Hubungi kami jika ada masalah</p>
|
|
</div>
|
|
</div>
|
|
<a href="mailto:canedoc.app@gmail.com"
|
|
class="px-4 py-2 rounded-xl text-xs font-semibold transition"
|
|
style="background:#f0e8ff;color:#7c3aed;border:1px solid #c4b5fd;"
|
|
onmouseover="this.style.background='#e9d5ff'" onmouseout="this.style.background='#f0e8ff'">
|
|
Hubungi
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{{-- Modal Manajemen Perangkat --}}
|
|
<div id="deviceModal" class="fixed inset-0 z-50 hidden flex items-center justify-center"
|
|
style="background:rgba(0,0,0,0.4);">
|
|
<div class="bg-white rounded-2xl p-6 w-full max-w-sm mx-4 shadow-2xl"
|
|
style="animation:popIn .25s cubic-bezier(0.22,1,0.36,1);">
|
|
<div class="flex items-center justify-between mb-5">
|
|
<h3 class="font-bold text-base" style="font-family:'Playfair Display',serif;color:#1a3a2a;">Manajemen Perangkat</h3>
|
|
<button onclick="closeDeviceModal()" class="w-8 h-8 rounded-full flex items-center justify-center"
|
|
style="background:#f0fdf4;color:#2d6a4f;">
|
|
<i class="fas fa-times text-sm"></i>
|
|
</button>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="p-3 rounded-xl flex items-center gap-3" style="background:#f0fdf4;border:1px solid #b7ddc4;">
|
|
<i class="fas fa-desktop" style="color:#2d6a4f;"></i>
|
|
<div>
|
|
<p class="text-sm font-semibold" style="color:#1a3a2a;">Perangkat Ini</p>
|
|
<p class="text-xs" style="color:#5a7a67;">Sesi aktif sekarang</p>
|
|
</div>
|
|
<span class="ml-auto text-xs font-semibold px-2 py-1 rounded-full" style="background:#d8f3dc;color:#2d6a4f;">Aktif</span>
|
|
</div>
|
|
<p class="text-xs text-center" style="color:#8fa89a;">Hanya menampilkan sesi aktif saat ini</p>
|
|
</div>
|
|
<button onclick="closeDeviceModal()"
|
|
class="w-full mt-4 py-2.5 rounded-xl text-sm font-semibold"
|
|
style="background:#f0fdf4;color:#2d6a4f;border:1.5px solid #b7ddc4;">
|
|
Tutup
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Modal Hapus Akun --}}
|
|
<div id="deleteAccountModal" class="fixed inset-0 z-50 hidden flex items-center justify-center"
|
|
style="background:rgba(0,0,0,0.4);">
|
|
<div class="bg-white rounded-2xl p-6 w-full max-w-sm mx-4 shadow-2xl"
|
|
style="animation:popIn .25s cubic-bezier(0.22,1,0.36,1);">
|
|
<div class="text-center mb-4">
|
|
<div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3" style="background:#fff0f0;">
|
|
<i class="fas fa-user-times text-2xl" style="color:#dc2626;"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-1" style="font-family:'Playfair Display',serif;color:#1a3a2a;">Hapus Akun?</h3>
|
|
<p class="text-sm" style="color:#5a7a67;">Semua data kamu akan dihapus permanen dan tidak bisa dikembalikan.</p>
|
|
</div>
|
|
<div class="flex gap-3 mt-4">
|
|
<button onclick="closeDeleteModal()"
|
|
class="flex-1 py-2.5 rounded-xl text-sm font-semibold"
|
|
style="background:#f0fdf4;color:#2d6a4f;border:1.5px solid #b7ddc4;">
|
|
Batal
|
|
</button>
|
|
<form method="POST" action="{{ url('/profile/delete') }}" class="flex-1">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="w-full py-2.5 rounded-xl text-sm font-semibold text-white" style="background:#dc2626;">
|
|
Ya, Hapus
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function openDeviceModal() { document.getElementById('deviceModal').classList.remove('hidden'); }
|
|
function closeDeviceModal() { document.getElementById('deviceModal').classList.add('hidden'); }
|
|
function openDeleteModal() { document.getElementById('deleteAccountModal').classList.remove('hidden'); }
|
|
function closeDeleteModal() { document.getElementById('deleteAccountModal').classList.add('hidden'); }
|
|
|
|
document.getElementById('deviceModal').addEventListener('click', function(e) { if (e.target === this) closeDeviceModal(); });
|
|
document.getElementById('deleteAccountModal').addEventListener('click', function(e) { if (e.target === this) closeDeleteModal(); });
|
|
</script>
|
|
<style>
|
|
@keyframes popIn {
|
|
from { transform: scale(0.85); opacity: 0; }
|
|
to { transform: scale(1); opacity: 1; }
|
|
}
|
|
</style>
|
|
@endpush |