@if(count($pending) > 0)
    <div class="list-group list-group-flush">
        @foreach($pending as $item)
            <div class="list-group-item px-0">
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <h6 class="mb-0 text-dark">{{ $item['service_name'] }}</h6>
                    @if($item['status'] == 'OVERDUE')
                        <span class="badge bg-danger">OVERDUE</span>
                    @elseif($item['status'] == 'WARNING')
                        <span class="badge bg-warning text-dark">DUE SOON</span>
                    @else
                        <span class="badge bg-success">COMPLETED</span>
                    @endif
                </div>
                <div class="row g-0 small text-muted">
                    <div class="col-6">Last: {{ $item['last_service_km'] ?: '0' }} KM</div>
                    <div class="col-6 text-end text-danger fw-bold">Due: {{ $item['next_due_km'] ?: 'N/A' }} KM</div>
                    @if($item['next_due_date'])
                        <div class="col-12 mt-1">Due Date: {{ date('d-M-Y', strtotime($item['next_due_date'])) }}</div>
                    @endif
                </div>
            </div>
        @endforeach
    </div>
@else
    <div class="alert alert-success m-0">All systems operational. No pending services.</div>
@endif