{{-- resources/views/admin/layouts/topbar.blade.php --}}

@php
    // Menghitung jumlah pesan kontak yang belum dibaca
    $unreadPesanCount = \App\Models\PesanKontak::where('is_read', false)->count();
    
    // Mengambil 5 pesan terbaru yang belum dibaca untuk preview dropdown
    $latestPesan = \App\Models\PesanKontak::where('is_read', false)
                    ->orderBy('created_at', 'desc')
                    ->take(5)
                    ->get();
@endphp

<nav class="topbar">
    <div class="topbar-left">
        <button class="btn-toggle" id="sidebar-toggle" aria-label="Toggle menu"><i class="bi bi-list"></i></button>
        <h1 class="page-title" id="pageTitle">Dashboard</h1>
    </div>
    <div class="topbar-right">
        <div class="search-box">
            <i class="bi bi-search"></i>
            <input type="text" class="form-control" placeholder="Cari siswa, berita...">
        </div>
        
        <div class="dropdown d-inline-block">
            <div class="topbar-icon" data-bs-toggle="dropdown" aria-expanded="false" style="cursor: pointer;">
                <i class="bi bi-bell"></i>
                @if($unreadPesanCount > 0)
                    <span class="notif-badge">{{ $unreadPesanCount > 99 ? '99+' : $unreadPesanCount }}</span>
                @endif
            </div>
            
            <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0 pt-0" style="width: 320px; border-radius: 12px; margin-top: 15px;">
                <li class="bg-primary text-white px-3 py-2" style="border-radius: 12px 12px 0 0;">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mb-0 fw-bold" style="font-size: 14px;">Notifikasi Pesan Masuk</h6>
                        @if($unreadPesanCount > 0)
                            <span class="badge bg-light text-primary rounded-pill">{{ $unreadPesanCount }} Baru</span>
                        @endif
                    </div>
                </li>
                
                <div style="max-height: 300px; overflow-y: auto; overflow-x: hidden;">
                    @forelse($latestPesan as $pesan)
                        <li>
                            <a class="dropdown-item py-3 border-bottom d-flex align-items-start gap-3" href="{{ route('admin.pesan-kontak.index') }}" style="white-space: normal; transition: background-color 0.2s;">
                                <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 38px; height: 38px; flex-shrink: 0;">
                                    <i class="bi bi-envelope-fill"></i>
                                </div>
                                <div class="w-100">
                                    <div class="d-flex justify-content-between mb-1 align-items-center">
                                        <h6 class="fw-bold text-dark mb-0 text-truncate" style="font-size: 13px; max-width: 130px;">{{ $pesan->nama }}</h6>
                                        <small class="text-muted" style="font-size: 10px;">{{ $pesan->created_at->diffForHumans() }}</small>
                                    </div>
                                    <p class="text-muted mb-0" style="font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
                                        {{ $pesan->subjek }}
                                    </p>
                                </div>
                            </a>
                        </li>
                    @empty
                        <li class="text-center py-4">
                            <i class="bi bi-envelope-open text-muted opacity-50 d-block mb-2" style="font-size: 2.5rem;"></i>
                            <span class="text-muted fw-medium" style="font-size: 13px;">Belum ada pesan baru.</span>
                        </li>
                    @endforelse
                </div>
                
                <li>
                    <a class="dropdown-item text-center text-primary fw-bold py-2 bg-light" href="{{ route('admin.pesan-kontak.index') }}" style="font-size: 13px; border-radius: 0 0 12px 12px;">
                        Lihat Semua Pesan <i class="bi bi-arrow-right ms-1"></i>
                    </a>
                </li>
            </ul>
        </div>

        <div class="topbar-icon" id="fullscreenBtn" title="Layar penuh">
            <i class="bi bi-arrows-fullscreen"></i>
        </div>
        <div class="dropdown">
            <a href="#" class="d-flex align-items-center text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="https://ui-avatars.com/api/?name={{ urlencode(Auth::user()->name ?? 'Admin Madrasah') }}&background=0B2C5E&color=fff&size=36" width="36" height="36" class="rounded-circle me-2" alt="User">
                <span class="d-none d-md-inline text-dark small fw-medium">{{ Auth::user()->name ?? 'Admin Madrasah' }}</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                <li><a class="dropdown-item" href="{{ route('admin.user.profile') }}"><i class="bi bi-person me-2"></i>Profil Saya</a></li>
                
                <li><hr class="dropdown-divider"></li>
                <li>
                    <form action="{{ route('logout') }}" method="POST" class="d-inline">
                        @csrf
                        <button type="submit" class="dropdown-item text-danger d-flex align-items-center">
                            <i class="bi bi-box-arrow-right me-2"></i>Keluar
                        </button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</nav>