{{-- resources/views/public/guru/_hero.blade.php --}}
<section class="section light-background" style="padding-top: 100px; padding-bottom: 20px;">
    <div class="container" data-aos="fade-in">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
            <div class="profile-cover" style="height: 180px; background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%); position: relative;">
                <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('{{ asset('bocor/assets/img/hero-bg.png') }}') center center / cover; opacity: 0.2;"></div>
            </div>
            <div class="card-body px-4 pb-4 pt-0 position-relative bg-white">
                <div class="d-flex flex-column flex-sm-row text-center text-sm-start align-items-center align-items-sm-end">
                    <div class="avatar-wrapper position-relative" style="margin-top: -60px; z-index: 2;">
                        <img src="{{ $user->picture ? asset('storage/' . $user->picture) : asset('kaiadmin/assets/img/iconuser.png') }}" class="rounded-circle border border-5 border-white shadow bg-white" style="width: 130px; height: 130px; object-fit: cover;">
                    </div>
                    <div class="ms-sm-4 mt-3 mt-sm-0 flex-grow-1 pb-2">
                        <h3 class="fw-bold text-dark mb-1">{{ $user->name }}</h3>
                        <p class="text-muted mb-0 small">
                            <i class="fa fa-id-card me-1"></i> NIP/NUPTK: {{ $guru->status->nip ?? '-' }} / {{ $guru->status->nuptk ?? '-' }} 
                            <span class="mx-1">|</span> 
                            <i class="fa fa-envelope me-1"></i> {{ $user->email }}
                        </p>
                    </div>
                    
                    <div class="pb-2 mt-4 mt-sm-0">
                        @if(request()->routeIs('guru.dashboard'))
                            <a href="{{ route('guru.profile.edit') }}" class="btn btn-outline-primary rounded-pill px-4 fw-bold shadow-sm">
                                <i class="fa fa-user-edit me-2"></i>Edit Profil
                            </a>
                        @else
                            <a href="{{ route('guru.dashboard') }}" class="btn btn-secondary rounded-pill px-4 fw-bold shadow-sm">
                                <i class="fas fa-home me-2"></i>Dashboard
                            </a>
                        @endif
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>