@props(['data'])

@php
    $hasAlerts = ($data['count'] ?? 0) > 0;
@endphp

@if($hasAlerts)
    <div class="rounded-xl border border-amber-200 dark:border-amber-500/20 bg-gradient-to-r from-amber-50 to-orange-50/50 dark:from-amber-950/20 dark:to-orange-950/10 p-5 shadow-sm select-none">
        <div class="flex flex-col sm:flex-row sm:items-center gap-4">
            <div class="flex items-center gap-3 flex-shrink-0">
                <div class="h-10 w-10 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-phone-pause text-amber-600 dark:text-amber-400 text-lg"></i>
                </div>
                <div>
                    <h5 class="text-base font-semibold text-amber-800 dark:text-amber-300 font-serif">
                        {{ $data['count'] }} unpaid phone {{ Str::plural('order', $data['count']) }}
                    </h5>
                    <h6 class="text-xs text-amber-600 dark:text-amber-400 font-medium">
                        <span class="font-bold">${{ number_format($data['total_owing'], 2) }}</span> total outstanding
                    </h6>
                </div>
            </div>

            <div class="flex-1 min-w-0">
                <div class="space-y-1.5">
                    @foreach($data['orders'] as $o)
                        <div class="flex items-center justify-between gap-3 text-xs bg-white/60 dark:bg-brand-charcoal-900/40 rounded-lg px-3 py-2 border border-amber-100 dark:border-amber-500/10">
                            <div class="flex items-center gap-2 min-w-0">
                                <a href="{{ route('invoices.show', $o['invoice_id']) }}" class="font-bold text-amber-700 dark:text-amber-400 hover:text-amber-800 dark:hover:text-amber-300 truncate">
                                    {{ $o['invoice_number'] }}
                                </a>
                                <span class="text-slate-500 dark:text-brand-charcoal-500 hidden sm:inline">—</span>
                                <span class="text-slate-600 dark:text-brand-charcoal-300 truncate hidden sm:inline">{{ $o['customer_name'] }}</span>
                            </div>
                            <div class="flex items-center gap-3 flex-shrink-0">
                                <span class="font-bold text-slate-700 dark:text-brand-charcoal-200">${{ number_format($o['total'], 2) }}</span>
                                <span class="text-slate-400 dark:text-brand-charcoal-500 text-[10px]">{{ $o['created_at'] }}</span>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="mt-2 text-right">
                    <a href="{{ route('orders.index') }}?order_type=phone&payment_status=pending" 
                       class="text-[10px] font-bold tracking-wider text-amber-600 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-300 uppercase">
                        View all phone orders <i class="uil uil-angle-right ms-0.5"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
@endif