322 lines
7.1 KiB
PHP
322 lines
7.1 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<main class="profile-page">
|
|
|
|
{{-- NOTIFIKASI AUTO-HIDE --}}
|
|
@if(session('success'))
|
|
<div class="toast-success" id="toast">
|
|
<i class="fas fa-check-circle"></i>
|
|
<span>{{ session('success') }}</span>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- HEADER PROFIL --}}
|
|
<div class="profile-hero">
|
|
<div class="avatar-wrapper">
|
|
@if($user->profile->foto_profil ?? false)
|
|
<img src="{{ asset('storage/' . $user->profile->foto_profil) }}" class="avatar-img">
|
|
@else
|
|
<div class="avatar-fallback">{{ $initials }}</div>
|
|
@endif
|
|
<div class="avatar-dot"></div>
|
|
</div>
|
|
<h2 class="profile-name">{{ $user->name }}</h2>
|
|
<p class="profile-email">{{ $user->email }}</p>
|
|
<span class="profile-role">{{ ucfirst($user->role) }}</span>
|
|
</div>
|
|
|
|
|
|
{{-- INFO CARDS --}}
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-icon bg-blue">
|
|
<i class="fas fa-phone"></i>
|
|
</div>
|
|
<div class="info-text">
|
|
<label>Nomor HP</label>
|
|
<p>{{ $user->profile->phone_number ?? 'Belum diatur' }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<div class="info-icon bg-green">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
</div>
|
|
<div class="info-text">
|
|
<label>Alamat</label>
|
|
<p>{{ $user->profile->address ?? 'Belum diatur' }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<div class="info-icon bg-purple">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
</div>
|
|
<div class="info-text">
|
|
<label>Terdaftar Sejak</label>
|
|
<p>{{ $user->created_at->translatedFormat('d F Y') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- BUTTON GROUP --}}
|
|
<div class="button-group">
|
|
<a href="{{ route('profile.edit') }}" class="btn btn-primary">
|
|
<i class="fas fa-pencil-alt"></i> Edit Profil
|
|
</a>
|
|
</div>
|
|
|
|
{{-- LOGOUT --}}
|
|
<form action="{{ route('logout') }}" method="POST" class="logout-form">
|
|
@csrf
|
|
<button type="submit" class="btn btn-danger">
|
|
<i class="fas fa-sign-out-alt"></i> Keluar Aplikasi
|
|
</button>
|
|
</form>
|
|
|
|
</main>
|
|
|
|
<style>
|
|
/* ========== MODERN PROFILE STYLES ========== */
|
|
.profile-page {
|
|
background: #f8fafc;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
animation: fadeIn 0.5s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Toast */
|
|
.toast-success {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: #f0fdf4;
|
|
color: #16a34a;
|
|
padding: 14px 18px;
|
|
border-radius: 14px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
margin-bottom: 16px;
|
|
border: 1px solid #bbf7d0;
|
|
box-shadow: 0 4px 20px rgba(22, 163, 74, 0.08);
|
|
}
|
|
|
|
/* Hero */
|
|
.profile-hero {
|
|
text-align: center;
|
|
padding: 20px 0 16px;
|
|
}
|
|
|
|
.avatar-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.avatar-img {
|
|
width: 88px;
|
|
height: 88px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 4px solid white;
|
|
box-shadow: 0 8px 30px rgba(0, 82, 156, 0.15);
|
|
}
|
|
|
|
.avatar-fallback {
|
|
width: 88px;
|
|
height: 88px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #00529c, #0077cc);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
border: 4px solid white;
|
|
box-shadow: 0 8px 30px rgba(0, 82, 156, 0.2);
|
|
}
|
|
|
|
.avatar-dot {
|
|
width: 14px;
|
|
height: 14px;
|
|
background: #22c55e;
|
|
border: 3px solid white;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
bottom: 4px;
|
|
right: 4px;
|
|
}
|
|
|
|
.profile-name {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
margin: 0 0 4px;
|
|
}
|
|
|
|
.profile-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.meta-item {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.meta-divider {
|
|
color: #cbd5e1;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Info Grid */
|
|
.info-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
background: white;
|
|
padding: 16px 18px;
|
|
border-radius: 16px;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
.profile-role {
|
|
display: inline-block;
|
|
margin-top: 0px;
|
|
padding: 4px 14px;
|
|
background: #eff6ff;
|
|
color: #00529c;
|
|
border-radius: 20px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.info-item:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.info-icon {
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-icon.bg-blue { background: #eff6ff; color: #3b82f6; }
|
|
.info-icon.bg-green { background: #f0fdf4; color: #22c55e; }
|
|
.info-icon.bg-purple { background: #f5f3ff; color: #7c3aed; }
|
|
|
|
.info-text label {
|
|
font-size: 11px;
|
|
color: #94a3b8;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.info-text p {
|
|
font-size: 14px;
|
|
color: #1e293b;
|
|
font-weight: 500;
|
|
margin: 2px 0 0;
|
|
}
|
|
|
|
/* Buttons */
|
|
.button-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.logout-form {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
padding: 14px;
|
|
border-radius: 14px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
text-decoration: none;
|
|
transition: all 0.25s ease;
|
|
border: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.btn:active { transform: scale(0.97); }
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #00529c, #0077cc);
|
|
color: white;
|
|
box-shadow: 0 4px 15px rgba(0, 82, 156, 0.25);
|
|
}
|
|
.btn-primary:hover { box-shadow: 0 8px 25px rgba(0, 82, 156, 0.35); }
|
|
|
|
.btn-outline {
|
|
background: white;
|
|
color: #00529c;
|
|
border: 2px solid #e2e8f0;
|
|
}
|
|
.btn-outline:hover { border-color: #00529c; background: #f8fafc; }
|
|
|
|
.btn-danger {
|
|
background: white;
|
|
color: #ef4444;
|
|
border: 1px solid #fecaca;
|
|
}
|
|
.btn-danger:hover { background: #fef2f2; }
|
|
|
|
/* Responsive */
|
|
@media (min-width: 480px) {
|
|
.profile-page { max-width: 480px; margin: auto; }
|
|
}
|
|
</style>
|
|
|
|
{{-- Auto-hide Toast --}}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var toast = document.getElementById('toast');
|
|
if (toast) {
|
|
setTimeout(function() {
|
|
toast.style.transition = 'opacity 0.4s ease';
|
|
toast.style.opacity = '0';
|
|
setTimeout(function() { toast.remove(); }, 400);
|
|
}, 3000);
|
|
}
|
|
});
|
|
</script>
|
|
@endsection |