<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profil - Pustaka Nawasena</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">

    <style>
        :root {
            --primary-color: #007bff;
            --bg-color: #f4f7fa;
            --card-bg: #ffffff;
            --text-dark: #334155;
            --border-color: #f1f5f9;
        }

        /* Menghilangkan scrollbar secara total di semua browser */
        body { 
            background: var(--bg-color); 
            font-family: 'Inter', sans-serif; 
            margin: 0; 
            padding: 0; 
            color: var(--text-dark);
            overflow: hidden; /* Mencegah scrolling */
            height: 100vh;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }

        body::-webkit-scrollbar {
            display: none; /* Chrome, Safari, and Opera */
        }

        /* Navbar Styling */
        .navbar-custom { 
            background: var(--card-bg); 
            box-shadow: 0 2px 15px rgba(0,0,0,0.05); 
            padding: 0.75rem 1.5rem; 
        }
        .navbar-brand img { width: 35px; height: 35px; object-fit: contain; }
        .navbar-brand span { font-weight: 800; letter-spacing: -0.5px; }

        .btn-nav {
            font-weight: 700;
            font-size: 0.85rem;
            padding: 0.5rem 1rem;
            border-radius: 10px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Profile Card Styling */
        .profile-container { 
            display: flex; 
            justify-content: center; 
            align-items: center;
            height: calc(100vh - 70px); /* Memusatkan secara vertikal */
            padding: 20px; 
        }
        .profile-card { 
            background: var(--card-bg); 
            border-radius: 24px; 
            width: 100%; 
            max-width: 750px; 
            display: flex; 
            flex-direction: row; 
            padding: 40px; 
            box-shadow: 0 20px 40px rgba(0,0,0,0.04); 
            gap: 40px; 
            border: 1px solid var(--border-color); 
        }

        /* Avatar Section */
        .avatar-section { flex-shrink: 0; }
        .avatar-box img { 
            width: 190px; 
            height: 190px; 
            border-radius: 22px; 
            object-fit: cover; 
            border: 4px solid #fff; 
            box-shadow: 0 10px 20px rgba(0,0,0,0.08);
            background: #f8fafc; 
        }

        /* Info Items Styling */
        .info-section { flex-grow: 1; }
        .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        .info-item { 
            background: #f8fafc; 
            padding: 14px 18px; 
            border-radius: 14px; 
            border: 1px solid var(--border-color); 
        }
        .info-item label { 
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.65rem; 
            color: var(--primary-color); 
            font-weight: 800; 
            text-transform: uppercase; 
            margin-bottom: 4px; 
        }
        .info-item span { font-weight: 600; color: var(--text-dark); font-size: 0.95rem; display: block; }

        .full-width { grid-column: span 2; }

        @media (max-width: 768px) {
            body { overflow: auto; height: auto; } /* Aktifkan scroll hanya di mobile jika layar kecil */
            .profile-card { flex-direction: column; padding: 30px; text-align: center; }
            .info-grid { grid-template-columns: 1fr; }
            .full-width { grid-column: span 1; }
            .avatar-section { margin: 0 auto; }
            .profile-container { height: auto; padding: 40px 20px; }
        }
    </style>
</head>
<body>

@php
    $anggota = $user->anggota;
    $namaFotoDb = $anggota->foto ?? null;

    if ($namaFotoDb) {
        $urlFoto = asset('storage/foto_anggota/' . $namaFotoDb);
    } else {
        $urlFoto = asset('images/default-user.png');
    }
@endphp

<nav class="navbar navbar-custom sticky-top">
    <div class="container-fluid d-flex justify-content-between align-items-center">
        <a class="navbar-brand d-flex align-items-center" href="#">
            <img src="{{ asset('images/kartu.png') }}" alt="Logo">
            <span class="ms-2 text-primary">PUSTAKA NAWASENA</span>
        </a>

        <div class="d-flex gap-2">
            <a href="{{ route('user.dashboard') }}" class="btn btn-light btn-nav text-dark border">
                <i class="bi bi-house-door-fill"></i> <span class="d-none d-md-inline">Home</span>
            </a>
            <a href="{{ route('user.security') }}" class="btn btn-warning btn-nav text-dark">
                <i class="bi bi-shield-lock-fill"></i> <span class="d-none d-md-inline">Keamanan</span>
            </a>
            <form action="{{ route('logout') }}" method="POST" class="d-inline">
                @csrf
                <button type="submit" class="btn btn-danger btn-nav">
                    <i class="bi bi-box-arrow-right"></i> <span class="d-none d-md-inline">Logout</span>
                </button>
            </form>
        </div>
    </div>
</nav>

<div class="profile-container">
    <div class="profile-card">
        <div class="avatar-section">
            <div class="avatar-box">
                <img src="{{ $urlFoto }}" alt="Profil User">
            </div>
        </div>

        <div class="info-section">
            <h4 class="fw-800 mb-4 text-dark">Profil Akun</h4>
            
            <div class="info-grid">
                <div class="info-item full-width">
                    <label><i class="bi bi-person-fill"></i> Nama Lengkap</label>
                    <span>{{ $anggota->nama ?? $user->name }}</span>
                </div>

                <div class="info-item">
                    <label><i class="bi bi-card-text"></i> NIP / NIM</label>
                    <span>{{ $anggota->nip_nim ?? '-' }}</span>
                </div>

                <div class="info-item">
                    <label><i class="bi bi-telephone-fill"></i> No. Telepon</label>
                    <span>{{ $anggota->no_hp ?? '-' }}</span>
                </div>

                <div class="info-item full-width">
                    <label><i class="bi bi-envelope-at-fill"></i> Alamat Email</label>
                    <span>{{ $anggota->email ?? $user->email }}</span>
                </div>

                <div class="info-item full-width">
                    <label><i class="bi bi-geo-alt-fill"></i> Alamat</label>
                    <span>{{ $anggota->alamat ?? 'Alamat belum diatur' }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

