{{--
    IFNEX — Layer 3 (left): Recent shipments table widget.
    Compact 5-row table with brand-aligned status badges + hover state.
--}}
<x-filament-widgets::widget>
    <div class="ifnex-card-shadow ifnex-card bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden">

        {{-- ──────── Header ──────── --}}
        <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
            <div class="flex items-center gap-2.5">
                <span class="inline-flex items-center justify-center w-9 h-9 rounded-xl bg-amber-100 dark:bg-amber-900/40 text-amber-600 dark:text-amber-400">
                    <x-heroicon-o-truck class="w-5 h-5" />
                </span>
                <h3 class="text-base font-bold text-gray-900 dark:text-white">آخرین سفارشات</h3>
            </div>
            <a href="{{ $viewAllUrl ?? '#' }}"
               class="ifnex-link-inline text-xs font-semibold text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300 transition-colors">
                مشاهده همه ←
            </a>
        </div>

        {{-- ──────── Body ──────── --}}
        @if($recentShipments->isEmpty())
            <div class="p-10 text-center">
                <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gray-100 dark:bg-gray-700/50 mb-3">
                    <x-heroicon-o-inbox class="w-7 h-7 text-gray-400" />
                </div>
                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">هنوز سفارشی ثبت نشده است</p>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="bg-gray-50 dark:bg-gray-900/40 text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-gray-700">
                            <th class="ifnex-th text-right">AWB</th>
                            <th class="ifnex-th text-right">مسیر</th>
                            <th class="ifnex-th text-right">وضعیت</th>
                            <th class="ifnex-th text-right">مبلغ</th>
                            <th class="ifnex-th text-right">تاریخ</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50 dark:divide-gray-700/60">
                        @foreach($recentShipments as $shipment)
                            <tr class="ifnex-table-row-hover transition-colors duration-150">
                                <td class="ifnex-td">
                                    @if(!empty($shipment['url']))
                                        <a href="{{ $shipment['url'] }}" class="font-mono text-xs font-bold text-gray-900 dark:text-white hover:text-amber-600 dark:hover:text-amber-400 transition-colors">
                                            {{ $shipment['awb'] }}
                                        </a>
                                    @else
                                        <span class="font-mono text-xs font-bold text-gray-900 dark:text-white">{{ $shipment['awb'] }}</span>
                                    @endif
                                </td>
                                <td class="ifnex-td text-xs text-gray-700 dark:text-gray-300">
                                    {{ $shipment['route'] }}
                                </td>
                                <td class="ifnex-td">
                                    <span class="ifnex-badge {{ $shipment['status_color'] }}">
                                        {{ $shipment['status_label'] }}
                                    </span>
                                </td>
                                <td class="ifnex-td text-xs font-semibold text-gray-900 dark:text-gray-100">
                                    {{ $shipment['amount'] }}
                                </td>
                                <td class="ifnex-td text-xs text-gray-500 dark:text-gray-400">
                                    {{ $shipment['date'] }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</x-filament-widgets::widget>