<div class="p-6 space-y-6">
    {{-- Header --}}
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">{{ __('تسليم المنتجات الأساسية') }}</h1>
            <p class="text-sm text-gray-500 mt-1">{{ __('تتبع استلام اللاعبين للمنتجات الأساسية') }}</p>
        </div>
        @if($pendingCount > 0)
        <div class="flex items-center gap-2 px-4 py-2 bg-red-50 border border-red-200 rounded-xl">
            <span class="w-2.5 h-2.5 rounded-full bg-red-500 animate-pulse"></span>
            <span class="text-sm font-semibold text-red-700">{{ $pendingCount }} {{ __('لم يستلموا بعد') }}</span>
        </div>
        @endif
    </div>

    @if(session('success'))
    <div class="p-3 bg-green-50 border border-green-200 rounded-lg text-sm text-green-700">
        {{ session('success') }}
    </div>
    @endif

    {{-- Filters --}}
    <div class="flex flex-wrap gap-3">
        <input type="text" wire:model.live.debounce.300ms="search"
               class="flex-1 min-w-48 px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
               placeholder="{{ __('ابحث باسم اللاعب...') }}">

        <select wire:model.live="product_id"
                class="px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 bg-white">
            <option value="">{{ __('جميع المنتجات الأساسية') }}</option>
            @foreach($essentialProducts as $ep)
            <option value="{{ $ep->id }}">{{ $ep->name_ar }}</option>
            @endforeach
        </select>

        <div class="flex rounded-lg border border-gray-300 overflow-hidden">
            <button type="button" wire:click="$set('status', 'all')"
                    class="px-4 py-2.5 text-sm font-medium transition-colors {{ $status === 'all' ? 'bg-gray-800 text-white' : 'bg-white text-gray-600 hover:bg-gray-50' }}">
                {{ __('الكل') }}
            </button>
            <button type="button" wire:click="$set('status', 'pending')"
                    class="px-4 py-2.5 text-sm font-medium transition-colors border-s border-gray-300 {{ $status === 'pending' ? 'bg-red-600 text-white' : 'bg-white text-gray-600 hover:bg-gray-50' }}">
                {{ __('لم يستلموا') }}
            </button>
            <button type="button" wire:click="$set('status', 'delivered')"
                    class="px-4 py-2.5 text-sm font-medium transition-colors border-s border-gray-300 {{ $status === 'delivered' ? 'bg-green-600 text-white' : 'bg-white text-gray-600 hover:bg-gray-50' }}">
                {{ __('استلموا') }}
            </button>
        </div>
    </div>

    {{-- Table --}}
    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden" wire:loading.class="opacity-50 pointer-events-none">
        @if($items->isEmpty())
        <div class="py-16 text-center">
            <svg class="mx-auto w-12 h-12 text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
            </svg>
            <p class="text-gray-500 text-sm">{{ __('لا توجد سجلات') }}</p>
        </div>
        @else
        <table class="w-full text-sm">
            <thead class="bg-gray-50 border-b border-gray-200">
                <tr>
                    <th class="px-4 py-3 text-start text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('اللاعب') }}</th>
                    <th class="px-4 py-3 text-start text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('المنتج') }}</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('الكمية') }}</th>
                    <th class="px-4 py-3 text-start text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('الفاتورة') }}</th>
                    <th class="px-4 py-3 text-start text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('الحالة') }}</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('إجراء') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @foreach($items as $item)
                @php
                    $participant = $item->invoice?->billable;
                    $person = $participant?->person;
                    $playerName = $person?->name_ar ?? $person?->name ?? __('غير محدد');
                @endphp
                <tr class="hover:bg-gray-50 transition-colors {{ $item->is_delivered ? 'opacity-60' : '' }}">
                    <td class="px-4 py-3">
                        <p class="font-medium text-gray-800">{{ $playerName }}</p>
                        @if($person?->phone)
                        <p class="text-xs text-gray-500" dir="ltr">{{ $person->phone }}</p>
                        @endif
                    </td>
                    <td class="px-4 py-3">
                        <p class="font-medium text-gray-700">{{ $item->description }}</p>
                    </td>
                    <td class="px-4 py-3 text-center font-semibold text-gray-700">{{ $item->quantity }}</td>
                    <td class="px-4 py-3">
                        @if($item->invoice)
                        <span class="font-mono text-xs text-blue-600">{{ $item->invoice->number }}</span>
                        <p class="text-xs text-gray-400">{{ $item->invoice->created_at?->format('Y/m/d') }}</p>
                        @endif
                    </td>
                    <td class="px-4 py-3">
                        @if($item->is_delivered)
                        <div>
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                                {{ __('استلم') }}
                            </span>
                            @if($item->delivered_at)
                            <p class="text-xs text-gray-400 mt-0.5">{{ $item->delivered_at->format('Y/m/d H:i') }}</p>
                            @endif
                            @if($item->deliveredBy)
                            <p class="text-xs text-gray-400">{{ $item->deliveredBy->name }}</p>
                            @endif
                        </div>
                        @else
                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-red-100 text-red-700">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            {{ __('لم يستلم') }}
                        </span>
                        @endif
                    </td>
                    <td class="px-4 py-3 text-center">
                        @if(!$item->is_delivered)
                        <button type="button" wire:click="markDelivered({{ $item->id }})"
                                wire:loading.attr="disabled" wire:target="markDelivered({{ $item->id }})"
                                class="px-4 py-2 bg-green-600 text-white text-xs font-semibold rounded-lg hover:bg-green-700 disabled:opacity-50 transition-colors">
                            <span wire:loading.remove wire:target="markDelivered({{ $item->id }})">{{ __('استلم ✓') }}</span>
                            <span wire:loading wire:target="markDelivered({{ $item->id }})">...</span>
                        </button>
                        @else
                        <button type="button" wire:click="markUndelivered({{ $item->id }})"
                                class="px-3 py-1.5 border border-gray-300 text-gray-500 text-xs rounded-lg hover:bg-gray-50 transition-colors">
                            {{ __('تراجع') }}
                        </button>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @if($items->hasPages())
        <div class="px-4 py-3 border-t border-gray-200">
            {{ $items->links() }}
        </div>
        @endif
        @endif
    </div>
</div>
