{{-- Notification bell para topbar — Client y Closer.

     Renderiza el ícono campanita + badge counter + dropdown con últimas 5
     unread. Consume el endpoint del rol activo:
       - Client:  /my-projects/api/notifications/unread-count
       - Closer:  /closer/api/notifications/unread-count
--}}
@auth
    @php
        $u = auth()->user();
        if ($u->hasRole('Client')) {
            $countEndpoint = route('client.projects.notifications.unread-count');
            $indexUrl = route('client.projects.notifications.index');
        } elseif ($u->hasRole('Closer')) {
            $countEndpoint = route('closer.notifications.unread-count');
            $indexUrl = route('closer.notifications.index');
        } else {
            $countEndpoint = null;
            $indexUrl = null;
        }
    @endphp
    @if($countEndpoint)
        <div class="d-flex align-items-center ms-1 ms-lg-3">
            <div class="btn btn-icon btn-active-light-primary btn-custom position-relative w-30px h-30px w-md-40px h-md-40px"
                 data-kt-menu-trigger="click"
                 data-kt-menu-attach="parent"
                 data-kt-menu-placement="bottom-end"
                 id="bewproNotifBellTrigger">
                <i class="fas fa-bell fs-2"></i>
                <span class="badge badge-circle badge-danger position-absolute top-0 start-100 translate-middle d-none"
                      id="bewproNotifBellBadge"
                      style="min-width:18px;height:18px;font-size:10px;">
                    0
                </span>
            </div>

            <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded fw-bold w-350px"
                 data-kt-menu="true">
                <div class="px-4 py-3 d-flex justify-content-between align-items-center border-bottom">
                    <span class="fw-bold fs-6 text-gray-900">Notificaciones</span>
                    <a href="{{ $indexUrl }}" class="fs-8 text-primary">
                        Ver todas →
                    </a>
                </div>
                <div id="bewproNotifBellList" class="px-2 py-2" style="max-height: 400px; overflow-y: auto;">
                    <div class="text-muted fs-7 text-center py-4" id="bewproNotifBellEmpty">
                        <i class="fas fa-bell-slash fs-2 mb-2 d-block text-gray-400"></i>
                        Sin notificaciones nuevas
                    </div>
                </div>
            </div>
        </div>

        @push('scripts')
            <script>
                (function () {
                    const ENDPOINT = '{{ $countEndpoint }}';
                    const POLL_INTERVAL_MS = 60000; // cada 60s
                    const badge = document.getElementById('bewproNotifBellBadge');
                    const list  = document.getElementById('bewproNotifBellList');
                    const empty = document.getElementById('bewproNotifBellEmpty');

                    async function refresh() {
                        try {
                            const r = await fetch(ENDPOINT, { headers: { 'Accept': 'application/json' } });
                            if (!r.ok) return;
                            const data = await r.json();
                            if (data.count > 0) {
                                badge.textContent = data.count > 9 ? '9+' : data.count;
                                badge.classList.remove('d-none');
                            } else {
                                badge.classList.add('d-none');
                            }

                            if (data.latest && data.latest.length > 0) {
                                empty.classList.add('d-none');
                                list.innerHTML = data.latest.map(n => `
                                    <a href="${n.cta_url || '#'}" class="d-block text-decoration-none mb-2 p-3 rounded bg-light-primary border border-primary">
                                        <div class="d-flex align-items-start">
                                            <span class="badge badge-light-${n.icon_color || 'primary'} rounded-circle me-2 p-2" style="width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;">
                                                <i class="fas ${n.icon || 'fa-bell'}"></i>
                                            </span>
                                            <div class="flex-grow-1">
                                                <div class="fw-bold text-gray-900 fs-7">${n.title || ''}</div>
                                                <div class="text-gray-700 fs-8">${n.message || ''}</div>
                                                <div class="text-muted fs-9 mt-1">${n.created_at}</div>
                                            </div>
                                        </div>
                                    </a>
                                `).join('');
                            } else {
                                empty.classList.remove('d-none');
                                list.innerHTML = '';
                                list.appendChild(empty);
                            }
                        } catch (e) {
                            // silent — el panel sigue usable sin esto
                        }
                    }

                    document.addEventListener('DOMContentLoaded', () => {
                        refresh();
                        setInterval(refresh, POLL_INTERVAL_MS);
                    });
                })();
            </script>
        @endpush
    @endif
@endauth