@php
    $alerts = $serviceDueAlerts ?? collect();
    $overdueCount = (int) ($serviceDueOverdueCount ?? $alerts->where('status', 'overdue')->count());
    $totalCount = (int) ($serviceDueCount ?? $alerts->count());
    $soonCount = max(0, $totalCount - $overdueCount);
    $badgeCount = $overdueCount > 0 ? $overdueCount : $totalCount;
@endphp

<div class="dropdown gnh">
    <button type="button"
            class="gnh__bell {{ $totalCount > 0 ? 'has-items' : '' }}"
            data-bs-toggle="dropdown"
            data-bs-auto-close="outside"
            aria-expanded="false"
            aria-label="Service notifications">
        <i class="bi bi-bell{{ $totalCount > 0 ? '-fill' : '' }}"></i>
        @if($totalCount > 0)
        <span class="gnh__count {{ $overdueCount > 0 ? 'gnh__count--hot' : 'gnh__count--warm' }}">
            {{ $badgeCount > 99 ? '99+' : $badgeCount }}
        </span>
        @endif
    </button>

    <div class="dropdown-menu dropdown-menu-end gnh__panel">
        <div class="gnh__head">
            <div class="gnh__head-row">
                <h6 class="gnh__title">Service alerts</h6>
                <span class="gnh__total {{ $totalCount > 0 ? '' : 'is-zero' }}">{{ $totalCount }}</span>
            </div>
            <div class="gnh__summary">
                @if($overdueCount > 0)
                <span class="gnh__pill gnh__pill--over">
                    <span class="gnh__pill-dot"></span>{{ $overdueCount }} overdue
                </span>
                @endif
                @if($soonCount > 0)
                <span class="gnh__pill gnh__pill--soon">
                    <span class="gnh__pill-dot"></span>{{ $soonCount }} due soon
                </span>
                @endif
                @if($totalCount === 0)
                <span class="gnh__pill gnh__pill--ok">
                    <span class="gnh__pill-dot"></span>All clear
                </span>
                @endif
            </div>
        </div>

        <div class="gnh__list">
            @forelse($alerts->take(8) as $alert)
            @php $isOverdue = ($alert['status'] ?? '') === 'overdue'; @endphp
            <a class="gnh__item"
               href="{{ route('garage.repair-orders.create', ['garage_vehicle_id' => $alert['vehicle_id']]) }}">
                <span class="gnh__item-icon {{ $isOverdue ? 'gnh__item-icon--over' : 'gnh__item-icon--soon' }}">
                    <i class="bi {{ $isOverdue ? 'bi-exclamation-lg' : 'bi-wrench' }}"></i>
                </span>
                <span class="gnh__item-main">
                    <span class="gnh__item-top">
                        <span class="gnh__item-vehicle">{{ $alert['registration_number'] ?: $alert['vehicle_label'] }}</span>
                        <span class="gnh__item-badge {{ $isOverdue ? 'gnh__item-badge--over' : 'gnh__item-badge--soon' }}">
                            {{ $isOverdue ? 'Overdue' : 'Soon' }}
                        </span>
                    </span>
                    @if(!empty($alert['customer_name']))
                    <span class="gnh__item-customer">{{ $alert['customer_name'] }}</span>
                    @endif
                    <span class="gnh__item-msg">{{ $alert['message'] }}</span>
                </span>
            </a>
            @empty
            <div class="gnh__empty">
                <div class="gnh__empty-icon"><i class="bi bi-check2"></i></div>
                <h6>No service alerts</h6>
                <p>Upcoming service by date or mileage shows here.</p>
            </div>
            @endforelse
        </div>

        @if($totalCount > 0)
        <div class="gnh__foot">
            <a href="{{ route('garage.dashboard') }}">
                Dashboard <i class="bi bi-arrow-right-short"></i>
            </a>
        </div>
        @endif
    </div>
</div>