

<?php $__env->startSection('content'); ?>
<main class="profile-page">

    
    <?php if(session('success')): ?>
        <div class="toast-success" id="toast">
            <i class="fas fa-check-circle"></i>
            <span><?php echo e(session('success')); ?></span>
        </div>
    <?php endif; ?>

    
    <div class="profile-hero">
        <div class="avatar-wrapper">
            <?php if($user->profile->foto_profil ?? false): ?>
                <img src="<?php echo e(asset('storage/' . $user->profile->foto_profil)); ?>" class="avatar-img">
            <?php else: ?>
                <div class="avatar-fallback"><?php echo e($initials); ?></div>
            <?php endif; ?>
            <div class="avatar-dot"></div>
        </div>
        <h2 class="profile-name"><?php echo e($user->name); ?></h2>
        <p class="profile-email"><?php echo e($user->email); ?></p>
        <span class="profile-role"><?php echo e(ucfirst($user->role)); ?></span>
    </div>


    
    <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><?php echo e($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><?php echo e($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><?php echo e($user->created_at->translatedFormat('d F Y')); ?></p>
            </div>
        </div>
    </div>

    
    <div class="button-group">
        <a href="<?php echo e(route('profile.edit')); ?>" class="btn btn-primary">
            <i class="fas fa-pencil-alt"></i> Edit Profil
        </a>
    </div>

    
    <form action="<?php echo e(route('logout')); ?>" method="POST" class="logout-form">
        <?php echo csrf_field(); ?>
        <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>


<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>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\UsEr\Documents\0 Mata Kuliah\Tugas Akhir\Project Pamsimas\PAMSIMAS_User\resources\views/profile/index.blade.php ENDPATH**/ ?>