@props(['data'])

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

    // Calculate insights
    $orders = $data['orders'] ?? [];
    $highPriority = array_filter($orders, fn($o) => (float) $o['total'] > 500);
    $largestOrder = max(array_map(fn($o) => (float) $o['total'], $orders ?: [0]));
    $totalOwing = $data['total_owing'] ?? 0;
@endphp

@if($hasAlerts)
    <style>
        .phone-order-container {
            --accent: #d97706;
        }

        .phone-order-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .phone-order-insights {
            display: flex;
            gap: 0.75rem;
            align-items: center;
            flex-wrap: wrap;
        }

        .insight-pill {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(217, 119, 6, 0.12);
            padding: 0.5rem 0.75rem;
            border-radius: 999px;
            font-weight: 700;
            color: #b45309;
            font-family: 'Monaco', monospace;
            font-size: 0.95rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .phone-order-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            max-height: 14rem;
            overflow-y: auto;
            padding-right: 0.25rem;
        }

        .phone-order-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.75rem 1rem;
            border-radius: 0.75rem;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 250, 240, 0.92));
            border: 1px solid rgba(217, 119, 6, 0.12);
        }

        .phone-order-meta {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            min-width: 0;
        }

        .invoice-link {
            font-weight: 700;
            color: #b45309;
            font-family: 'Monaco', monospace;
            text-decoration: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 220px;
            display: inline-block;
        }

        .customer-name {
            color: #475569;
            font-weight: 600;
            font-size: 0.875rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 220px;
        }

        .order-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .amount {
            font-family: 'Monaco', monospace;
            font-weight: 800;
            color: #0f172a;
            font-size: 1.05rem;
        }

        .time {
            color: #94a3b8;
            font-size: 0.8rem;
        }

        .badge {
            padding: 0.25rem 0.5rem;
            border-radius: 0.5rem;
            font-weight: 700;
            font-size: 0.675rem;
            text-transform: uppercase;
        }

        .badge-critical {
            background: rgba(239, 68, 68, 0.12);
            color: #991b1b;
            border: 1px solid rgba(239, 68, 68, 0.18);
        }

        .badge-high {
            background: rgba(234, 88, 12, 0.10);
            color: #7c2d12;
            border: 1px solid rgba(234, 88, 12, 0.14);
        }

        .badge-medium {
            background: rgba(217, 119, 6, 0.08);
            color: #78350f;
            border: 1px solid rgba(217, 119, 6, 0.12);
        }

        .actions {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .action-btn {
            width: 2rem;
            height: 2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.5rem;
            border: 1px solid rgba(217, 119, 6, 0.12);
            background: transparent;
            cursor: pointer;
        }

        @media (max-width: 640px) {
            .invoice-link, .customer-name {
                max-width: 140px;
            }

            .amount {
                font-size: 1rem;
            }
        }
    </style>

    <div class="phone-order-static">
        <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="phone-order-header">
                <div>
                    <h5 class="text-lg font-semibold text-amber-800 dark:text-amber-300 font-serif">Unpaid Phone
                        Orders</h5>
                    <div class="text-xs text-amber-600 dark:text-amber-400 mt-0.5">Action required •
                        showing {{ $data['count'] ?? 0 }} of {{ $data['total_unpaid'] ?? 0 }}</div>
                </div>
                <div class="phone-order-insights">
                    <span class="insight-pill">${{ number_format($totalOwing, 0) }} due</span>
                    @if(count($highPriority) > 0)
                        <span class="insight-pill">{{ count($highPriority) }} over $500</span>
                    @endif
                    <a href="{{ route('orders.index') }}?order_type=phone&payment_status=pending"
                       class="text-xs font-bold text-amber-600 dark:text-amber-400">View all →</a>
                </div>
            </div>

            <div class="phone-order-list" role="list">
                @foreach($orders as $o)
                    @php
                        $amount = floatval($o['total']);
                        if ($amount > 500) { $badge = 'badge-critical'; $label = 'High Value'; }
                        elseif ($amount > 250) { $badge = 'badge-high'; $label = 'Medium'; }
                        else { $badge = 'badge-medium'; $label = 'Pending'; }
                    @endphp
                    <div class="phone-order-item" role="listitem">
                        <div class="phone-order-meta">
                            <div class="order-info">
                                <a href="{{ route('invoices.show', $o['invoice_id']) }}"
                                   class="invoice-link">#{{ substr($o['invoice_number'], -6) }}</a>
                                <span class="badge {{ $badge }}">{{ $label }}</span>
                            </div>
                            <div class="order-info" style="align-items:center;">
                                <div class="customer-name">{{ $o['customer_name'] }}</div>
                                <div class="time">{{ $o['created_at'] }}</div>
                            </div>
                        </div>
                        <div style="display:flex;align-items:center;gap:1rem;">
                            <div class="amount">${{ number_format($o['total'], 2) }}</div>
                            <div class="actions">
                                <button class="action-btn pay" title="Quick mark paid (future)"
                                        onclick="event.stopPropagation()"><i class="uil uil-check"></i></button>
                                <a class="action-btn" href="{{ route('invoices.show', $o['invoice_id']) }}"
                                   title="View invoice"><i class="uil uil-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            @if($showMoreCount > 0)
                <div class="mt-3 text-xs text-slate-600 dark:text-slate-400">+{{ $showMoreCount }} more • <a
                        href="{{ route('orders.index') }}?order_type=phone&payment_status=pending"
                        class="font-semibold text-amber-600">View all</a></div>
            @endif
        </div>
    </div>
@endif