@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