@props(['deliveries'])

<div class="bg-white dark:bg-brand-charcoal-900 border border-slate-200 dark:border-brand-charcoal-800 rounded-xl p-5 shadow-sm select-none">
    <div class="mb-4 flex items-center justify-between">
        <div>
            <h5 class="text-base font-semibold text-slate-800 dark:text-brand-charcoal-100 font-serif">
                <i class="uil uil-truck me-1.5 text-brand-emerald-500"></i>
                Delivery Radar
            </h5>
            <h6 class="text-xs text-slate-450 dark:text-brand-charcoal-400 mt-0.5 font-medium">Today's scheduled deliveries & pickups</h6>
        </div>
        <a href="{{ route('deliveries.index') }}" class="text-[10px] font-bold tracking-wider text-brand-emerald-500 dark:text-brand-emerald-400 hover:text-brand-emerald-600 dark:hover:text-brand-emerald-300 uppercase">Manage</a>
    </div>

    <div class="space-y-2 max-h-[320px] overflow-y-auto pr-1 scrollbar">
        @forelse($deliveries as $d)
            <div class="flex items-start gap-3 p-3 rounded-xl transition-colors
                {{ $d['is_in_store_pickup'] ? 'bg-amber-50/60 dark:bg-amber-950/10 border border-amber-100 dark:border-amber-500/10' : 'bg-slate-50 dark:bg-brand-charcoal-950/30 border border-slate-100 dark:border-brand-charcoal-800/40' }}">
                <div class="flex-shrink-0 mt-0.5">
                    @if($d['is_in_store_pickup'])
                        <div class="h-8 w-8 rounded-full bg-amber-100 dark:bg-amber-950/30 flex items-center justify-center border border-amber-200 dark:border-amber-500/20">
                            <i class="uil uil-store text-amber-600 dark:text-amber-400 text-sm"></i>
                        </div>
                    @else
                        <div class="h-8 w-8 rounded-full bg-blue-100 dark:bg-blue-950/30 flex items-center justify-center border border-blue-200 dark:border-blue-500/20">
                            <i class="uil uil-truck text-blue-600 dark:text-blue-400 text-sm"></i>
                        </div>
                    @endif
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center justify-between gap-2">
                        <span class="text-xs font-bold text-slate-800 dark:text-brand-charcoal-150 truncate">{{ $d['name'] }}</span>
                        <span class="text-[10px] font-semibold text-slate-500 dark:text-brand-charcoal-400 whitespace-nowrap">{{ $d['delivery_time'] }}</span>
                    </div>
                    <p class="text-[10px] text-slate-500 dark:text-brand-charcoal-400 mt-0.5 truncate">
                        <i class="uil uil-map-marker me-0.5"></i>
                        {{ $d['address'] }}, {{ $d['city'] }} {{ $d['state'] }}
                    </p>
                    <div class="flex items-center gap-2 mt-1.5 flex-wrap">
                        <span class="text-[9px] font-bold tracking-wider uppercase text-slate-400 dark:text-brand-charcoal-500">
                            <i class="uil uil-invoice me-0.5"></i>
                            <a href="{{ route('invoices.show', $d['invoice_id']) }}" class="hover:text-brand-emerald-500 dark:hover:text-brand-emerald-400 transition-colors">{{ $d['invoice_number'] }}</a>
                        </span>
                        @if($d['is_in_store_pickup'])
                            <span class="px-1.5 py-0.5 rounded text-[8px] font-bold tracking-wider uppercase bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-950/20 dark:text-amber-400 dark:border-amber-500/20">Pickup</span>
                        @endif
                        @if($d['special_instructions'])
                            <span class="text-[8px] text-slate-400 dark:text-brand-charcoal-500 italic" title="{{ $d['special_instructions'] }}">
                                <i class="uil uil-comment-alt me-0.5"></i>Notes
                            </span>
                        @endif
                    </div>
                </div>
            </div>
        @empty
            <div class="text-center py-8">
                <i class="uil uil-truck text-3xl text-slate-400 dark:text-brand-charcoal-500 mb-2 block"></i>
                <p class="text-sm font-semibold text-slate-600 dark:text-brand-charcoal-300">No deliveries today</p>
                <small class="text-xs text-slate-450 dark:text-brand-charcoal-500 mt-1 block">All clear — no pickups or deliveries scheduled</small>
            </div>
        @endforelse
    </div>
</div>