@php
    $notifications = auth()->user()->unreadNotifications;
    $count = $notifications->count();
@endphp

<div class="relative" x-data="{ open: false }">
    <button @click="open = !open" class="relative p-2 text-gray-600 hover:text-gray-900 transition-all duration-200 hover:scale-105">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                  d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
        </svg>
        
        @if($count > 0)
        <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full shadow-lg" style="font-size: 0.65rem; min-width: 18px;">
            {{ $count > 99 ? '99+' : $count }}
        </span>
        @endif
    </button>

    <div x-show="open" 
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
         @click.away="open = false"
         class="absolute right-0 mt-2 w-80 bg-white rounded-xl shadow-2xl z-50 max-h-96 overflow-y-auto notification-bell-dropdown"
         style="border: 1px solid #e5e7eb;">
        
        <div class="notif-header d-flex justify-content-between align-items-center">
            <span class="d-flex align-items-center gap-2">
                <i class="bi bi-bell"></i> Notifikasi
            </span>
            @if($count > 0)
            <span class="badge" style="background: rgba(255,255,255,0.2); color: white; font-size: 0.7rem;">
                {{ $count }} baru
            </span>
            @endif
        </div>

        @forelse($notifications as $notification)
            @php
                $type = $notification->data['type'] ?? 'default';
                $iconMap = [
                    'disposisi_baru' => 'bi-arrow-right-circle-fill',
                    'surat_disetujui' => 'bi-check-circle-fill',
                    'surat_ditolak' => 'bi-x-circle-fill',
                ];
                $colorMap = [
                    'disposisi_baru' => 'background: rgba(45,80,22,0.1); color: #2d5016;',
                    'surat_disetujui' => 'background: rgba(5,150,105,0.1); color: #059669;',
                    'surat_ditolak' => 'background: rgba(220,53,69,0.1); color: #dc3545;',
                ];
                $icon = $iconMap[$type] ?? 'bi-bell-fill';
                $colorStyle = $colorMap[$type] ?? 'background: rgba(184,151,90,0.1); color: #b8975a;';
            @endphp
            <a href="{{ route('notifications.read', $notification->id) }}" 
               class="notif-item">
                <div class="d-flex align-items-start gap-3">
                    <div class="d-flex align-items-center justify-content-center rounded-3 flex-shrink-0" style="width: 36px; height: 36px; {{ $colorStyle }}">
                        <i class="bi {{ $icon }}" style="font-size: 1rem;"></i>
                    </div>
                    <div class="flex-grow-1 min-width-0">
                        @if($type == 'disposisi_baru')
                            <p class="mb-0 fw-semibold" style="font-size: 0.85rem; color: #1f2937;">Disposisi Baru</p>
                            <p class="mb-0 text-muted" style="font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ $notification->data['perihal'] ?? '' }}</p>
                            @if(!empty($notification->data['dari']))
                                <p class="mb-0 text-muted" style="font-size: 0.75rem;">Dari: {{ $notification->data['dari'] }}</p>
                            @endif
                        @elseif($type == 'surat_disetujui')
                            <p class="mb-0 fw-semibold" style="font-size: 0.85rem; color: #059669;">Surat Disetujui</p>
                            <p class="mb-0 text-muted" style="font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ $notification->data['perihal'] ?? '' }}</p>
                        @elseif($type == 'surat_ditolak')
                            <p class="mb-0 fw-semibold" style="font-size: 0.85rem; color: #dc3545;">Surat Ditolak</p>
                            <p class="mb-0 text-muted" style="font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ $notification->data['perihal'] ?? '' }}</p>
                        @else
                            <p class="mb-0 fw-semibold" style="font-size: 0.85rem; color: #1f2937;">{{ $notification->data['type'] ?? 'Notifikasi' }}</p>
                            <p class="mb-0 text-muted" style="font-size: 0.8rem;">{{ $notification->data['message'] ?? '' }}</p>
                        @endif
                        <p class="mb-0 mt-1" style="font-size: 0.72rem; color: #9ca3af;">
                            <i class="bi bi-clock" style="font-size: 0.65rem;"></i> {{ $notification->created_at->diffForHumans() }}
                        </p>
                    </div>
                    <div class="flex-shrink-0">
                        <span class="d-inline-block" style="width: 8px; height: 8px; border-radius: 50%; background: #2d5016;"></span>
                    </div>
                </div>
            </a>
        @empty
            <div class="notif-empty">
                <svg class="mx-auto mb-2" style="width: 48px; height: 48px; opacity: 0.35;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 
                          d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                </svg>
                <p class="mb-0" style="font-size: 0.85rem;">Tidak ada notifikasi baru</p>
            </div>
        @endforelse

        @if($count > 0)
        <div class="notif-footer">
            <form action="{{ route('notifications.mark-all-read') }}" method="POST">
                @csrf
                <button type="submit" class="w-100 text-center fw-semibold py-2 rounded-lg transition-all duration-200" style="font-size: 0.82rem; color: #2d5016; background: rgba(45,80,22,0.06); border: 1px solid rgba(45,80,22,0.15);">
                    <i class="bi bi-check2-all me-1"></i> Tandai Semua Sudah Dibaca
                </button>
            </form>
        </div>
        @endif
    </div>
</div>