<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>Profil Pengguna - {{ config('app.name', 'Laravel') }}</title>
    <link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">

    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

    <style>
        :root {
            --bg: #eef4ff;
            --panel: rgba(255, 255, 255, 0.9);
            --text: #172554;
            --muted: #64748b;
            --line: #dbe6f7;
            --primary: #4f46e5;
            --secondary: #2563eb;
            --cyan: #38bdf8;
            --shadow-soft: 0 28px 55px rgba(59, 84, 145, 0.10);
            --shadow-card: 0 18px 32px rgba(148, 163, 184, 0.12);
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            color: var(--text);
            background:
                radial-gradient(circle at top left, rgba(79, 70, 229, 0.08), transparent 20%),
                radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 22%),
                linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
            -webkit-font-smoothing: antialiased;
        }

        .app { display: flex; min-height: 100vh; }
        .content { flex: 1; width: 100%; padding: 28px; }
        .shell { max-width: 1480px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

        .surface {
            background: var(--panel);
            border: 1px solid rgba(255, 255, 255, 0.82);
            box-shadow: var(--shadow-soft);
            backdrop-filter: blur(16px);
        }

        .profile-hero {
            position: relative;
            overflow: hidden;
            border-radius: 32px;
            padding: 26px;
            background:
                radial-gradient(circle at top right, rgba(99, 102, 241, 0.16), transparent 24%),
                radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.13), transparent 22%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(243, 247, 255, 0.96) 100%);
        }

        .profile-hero::after {
            content: "";
            position: absolute;
            top: -70px;
            right: -70px;
            width: 220px;
            height: 220px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.16), rgba(56, 189, 248, 0.14));
            filter: blur(2px);
        }

        .pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.10), rgba(37, 99, 235, 0.08));
            color: var(--primary);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            border: 1px solid rgba(99, 102, 241, 0.10);
        }

        .hero-title {
            margin: 16px 0 8px;
            font-size: clamp(34px, 5vw, 58px);
            line-height: 0.92;
            letter-spacing: -0.06em;
            font-weight: 900;
        }

        .hero-text {
            margin: 0;
            color: var(--muted);
            line-height: 1.8;
            font-size: 14px;
            max-width: 760px;
        }

        .avatar {
            width: 118px;
            height: 118px;
            border-radius: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 46px;
            font-weight: 900;
            letter-spacing: -0.08em;
            background:
                radial-gradient(circle at top left, rgba(255, 255, 255, 0.28), transparent 34%),
                linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 24px 40px rgba(79, 70, 229, 0.24);
            border: 6px solid rgba(255, 255, 255, 0.76);
        }

        .action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 44px;
            padding: 0 16px;
            border-radius: 16px;
            font-size: 13px;
            font-weight: 900;
            transition: all 0.2s ease;
        }

        .action-btn.primary {
            color: #fff;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            box-shadow: 0 14px 24px rgba(79, 70, 229, 0.22);
        }

        .action-btn.soft {
            color: #233876;
            background: rgba(255, 255, 255, 0.88);
            border: 1px solid rgba(214, 226, 247, 0.98);
        }

        .profile-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
            gap: 20px;
        }

        .panel {
            overflow: hidden;
            border-radius: 32px;
            background:
                radial-gradient(circle at top right, rgba(99, 102, 241, 0.10), transparent 22%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(243, 247, 255, 0.96) 100%);
        }

        .panel-head {
            padding: 22px 24px;
            border-bottom: 1px solid rgba(219, 230, 247, 0.95);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .panel-title {
            margin: 0;
            color: #172554;
            font-size: 20px;
            font-weight: 900;
            letter-spacing: -0.04em;
        }

        .panel-subtitle {
            margin: 6px 0 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.6;
        }

        .info-list {
            padding: 10px 24px 24px;
        }

        .info-row {
            display: grid;
            grid-template-columns: 48px minmax(150px, 0.42fr) minmax(0, 1fr);
            gap: 16px;
            align-items: center;
            padding: 18px 0;
            border-bottom: 1px solid rgba(219, 230, 247, 0.9);
        }

        .info-row:last-child {
            border-bottom: 0;
        }

        .info-icon {
            width: 40px;
            height: 40px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            background: #eef2ff;
            border: 1px solid #dbeafe;
        }

        .info-label {
            color: var(--muted);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .info-value {
            color: #0f172a;
            font-size: 15px;
            font-weight: 900;
            line-height: 1.45;
            word-break: break-word;
        }

        .side-stack {
            display: grid;
            gap: 20px;
        }

        .mini-card {
            border-radius: 28px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.88);
            border: 1px solid rgba(219, 230, 247, 0.95);
            box-shadow: var(--shadow-card);
        }

        .role-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 900;
            border: 1px solid transparent;
        }

        .identity-card {
            position: relative;
            overflow: hidden;
            border-radius: 24px;
            padding: 18px;
            background:
                radial-gradient(circle at top right, rgba(79, 70, 229, 0.14), transparent 28%),
                linear-gradient(135deg, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.94));
            border: 1px solid rgba(219, 230, 247, 0.95);
        }

        .identity-card::after {
            content: "";
            position: absolute;
            right: -34px;
            bottom: -42px;
            width: 120px;
            height: 120px;
            border-radius: 999px;
            background: rgba(56, 189, 248, 0.12);
        }

        .identity-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .identity-chip {
            position: relative;
            z-index: 1;
            min-height: 96px;
            padding: 14px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.82);
            border: 1px solid rgba(219, 230, 247, 0.9);
        }

        .identity-label {
            color: var(--muted);
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .identity-value {
            margin-top: 10px;
            color: #172554;
            font-size: 18px;
            font-weight: 900;
            line-height: 1.15;
        }

        .identity-note {
            margin-top: 8px;
            color: #64748b;
            font-size: 12px;
            line-height: 1.5;
        }

        .access-strip {
            position: relative;
            z-index: 1;
            margin-top: 14px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 14px;
            border-radius: 20px;
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(56, 189, 248, 0.10));
            border: 1px solid rgba(191, 219, 254, 0.86);
        }

        @media (max-width: 1024px) {
            .app { display: block; }
            .content { padding: 20px; padding-top: 84px; }
            .profile-grid { grid-template-columns: 1fr; }
        }

        @media (max-width: 680px) {
            .content { padding: 16px; padding-top: 84px; }
            .profile-hero, .panel { border-radius: 24px; }
            .info-list { padding: 6px 16px 16px; }
            .info-row {
                grid-template-columns: 40px minmax(0, 1fr);
                gap: 12px;
            }
            .info-value {
                grid-column: 2;
                font-size: 14px;
            }
            .panel-head { flex-direction: column; align-items: stretch; }
            .avatar { width: 96px; height: 96px; border-radius: 28px; font-size: 38px; }
            .identity-grid { grid-template-columns: 1fr; }
        }
    </style>
</head>

<body>
    <div class="app">
        @include('partials.sidebar')

        <main class="content">
            <div class="shell">
                @php
                    $roleNames = [
                        'user' => 'User',
                        'staff_bidang' => 'Staff Bidang',
                        'kepala_bidang' => 'Kepala Bidang',
                        'sekretariat' => 'Sipian',
                    ];

                    $roleStyles = [
                        'user' => 'bg-blue-50 text-blue-700 border-blue-200',
                        'staff_bidang' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
                        'kepala_bidang' => 'bg-amber-50 text-amber-700 border-amber-200',
                        'sekretariat' => 'bg-rose-50 text-rose-700 border-rose-200',
                    ];

                    $roleName = $roleNames[$user->role] ?? ucfirst(str_replace('_', ' ', $user->role ?? 'user'));
                    $roleStyle = $roleStyles[$user->role] ?? 'bg-slate-50 text-slate-700 border-slate-200';
                    $initials = collect(explode(' ', trim($user->name)))
                        ->filter()
                        ->take(2)
                        ->map(fn ($part) => mb_substr($part, 0, 1))
                        ->implode('');
                    $initials = $initials ?: 'U';
                @endphp

                <section class="profile-hero surface">
                    <div class="relative z-10 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-7">
                        <div class="flex flex-col sm:flex-row sm:items-center gap-5">
                            <div class="avatar">{{ strtoupper($initials) }}</div>
                            <div>
                                <span class="pill">
                                    <i data-lucide="user-round-check" class="w-4 h-4"></i>
                                    Profil Akun
                                </span>
                                <h1 class="hero-title">{{ $user->name }}</h1>
                                <p class="hero-text">Kelola identitas akun, informasi kontak, divisi, dan keamanan akses Sipian dari satu tempat.</p>
                            </div>
                        </div>

                        <div class="flex flex-col sm:flex-row lg:flex-col xl:flex-row gap-3">
                            <a href="{{ route('profile.edit') }}" class="action-btn primary">
                                <i data-lucide="edit-3" class="w-4 h-4"></i>
                                Edit Profil
                            </a>
                            <a href="{{ route('profile.password') }}" class="action-btn soft">
                                <i data-lucide="lock-keyhole" class="w-4 h-4"></i>
                                Ubah Password
                            </a>
                        </div>
                    </div>
                </section>

                <div class="profile-grid">
                    <section class="panel surface">
                        <div class="panel-head">
                            <div>
                                <h2 class="panel-title">Informasi Akun</h2>
                                <p class="panel-subtitle">Data utama profil pengguna. Riwayat peminjaman dipisahkan ke halaman Riwayat Selesai.</p>
                            </div>
                            <span class="role-badge {{ $roleStyle }}">
                                <i data-lucide="badge-check" class="w-4 h-4"></i>
                                {{ $roleName }}
                            </span>
                        </div>

                        <div class="info-list">
                            <div class="info-row">
                                <div class="info-icon"><i data-lucide="user" class="w-5 h-5"></i></div>
                                <div class="info-label">Nama Lengkap</div>
                                <div class="info-value">{{ $user->name }}</div>
                            </div>

                            <div class="info-row">
                                <div class="info-icon"><i data-lucide="mail" class="w-5 h-5"></i></div>
                                <div class="info-label">Alamat Email</div>
                                <div class="info-value">{{ $user->email }}</div>
                            </div>

                            <div class="info-row">
                                <div class="info-icon"><i data-lucide="phone" class="w-5 h-5"></i></div>
                                <div class="info-label">Nomor Telepon</div>
                                <div class="info-value">{{ $user->phone ?: 'Belum diisi' }}</div>
                            </div>

                            <div class="info-row">
                                <div class="info-icon"><i data-lucide="building-2" class="w-5 h-5"></i></div>
                                <div class="info-label">Divisi</div>
                                <div class="info-value">{{ $user->divisi->nama ?? 'Belum ada divisi' }}</div>
                            </div>

                            <div class="info-row">
                                <div class="info-icon"><i data-lucide="calendar-days" class="w-5 h-5"></i></div>
                                <div class="info-label">Tanggal Bergabung</div>
                                <div class="info-value">{{ \Carbon\Carbon::parse($user->created_at)->translatedFormat('d F Y') }}</div>
                            </div>

                            <div class="info-row">
                                <div class="info-icon"><i data-lucide="fingerprint" class="w-5 h-5"></i></div>
                                <div class="info-label">ID Akun</div>
                                <div class="info-value">USR-{{ str_pad($user->id, 4, '0', STR_PAD_LEFT) }}</div>
                            </div>
                        </div>
                    </section>

                    <aside class="side-stack">
                        <section class="mini-card surface">
                            <div class="flex items-start justify-between gap-4">
                                <div>
                                    <div class="text-xs font-black text-slate-500 uppercase tracking-[0.14em]">Status Akun</div>
                                    <div class="mt-3 text-2xl font-black text-slate-900">{{ $user->email_verified_at ? 'Terverifikasi' : 'Aktif' }}</div>
                                    <p class="mt-2 text-sm leading-6 text-slate-500">Akun ini dapat digunakan untuk mengakses fitur sesuai role yang diberikan.</p>
                                </div>
                                <div class="w-12 h-12 rounded-2xl bg-emerald-50 border border-emerald-100 text-emerald-600 flex items-center justify-center">
                                    <i data-lucide="shield-check" class="w-6 h-6"></i>
                                </div>
                            </div>
                        </section>

                        <section class="mini-card surface">
                            <div class="text-xs font-black text-slate-500 uppercase tracking-[0.14em]">Kartu Akses</div>
                            <div class="mt-4 identity-card">
                                <div class="relative z-10 flex items-center gap-4">
                                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-600 to-blue-600 text-white flex items-center justify-center shadow-lg">
                                        <i data-lucide="id-card" class="w-7 h-7"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-black text-slate-900">Sipian Access Pass</div>
                                        <div class="mt-1 text-xs font-bold uppercase tracking-[0.16em] text-slate-400">USR-{{ str_pad($user->id, 4, '0', STR_PAD_LEFT) }}</div>
                                    </div>
                                </div>

                                <div class="identity-grid mt-5">
                                    <div class="identity-chip">
                                        <div class="identity-label">Role</div>
                                        <div class="identity-value">{{ $roleName }}</div>
                                        <div class="identity-note">Hak akses mengikuti level akun.</div>
                                    </div>
                                    <div class="identity-chip">
                                        <div class="identity-label">Divisi</div>
                                        <div class="identity-value">{{ $user->divisi->nama ?? 'Umum' }}</div>
                                        <div class="identity-note">Dipakai untuk alur persetujuan.</div>
                                    </div>
                                </div>

                                <div class="access-strip">
                                    <div class="w-10 h-10 rounded-2xl bg-white text-blue-600 flex items-center justify-center border border-blue-100 flex-shrink-0">
                                        <i data-lucide="sparkles" class="w-5 h-5"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-black text-slate-900">Profil sudah dipusatkan</div>
                                        <p class="mt-1 text-xs leading-6 text-slate-500">Halaman ini fokus menampilkan identitas akun. Aksi edit tetap tersedia di tombol utama atas.</p>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </aside>
                </div>
            </div>
        </main>
    </div>

    <script>
        lucide.createIcons();
    </script>
</body>

</html>
