@props(['item'])

<div {{ $attributes->merge(['class' => 'bg-white border border-zinc-200 rounded-sm shadow-sm hover:shadow-md transition-all overflow-hidden group relative flex flex-col']) }}>
    <!-- Image Header -->
    <div class="h-32 bg-zinc-100 relative overflow-hidden flex-shrink-0">
        @if($item->image_path)
            <img src="{{ Storage::url($item->image_path) }}" alt="{{ $item->name }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
        @else
            <div class="w-full h-full flex items-center justify-center text-zinc-300">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            </div>
        @endif
        
        <!-- Veg/Non-Veg Indicator -->
        <div class="absolute top-2 right-2">
            @if($item->is_veg)
                <div class="w-4 h-4 border border-green-600 p-0.5 flex items-center justify-center bg-white rounded-[2px]" title="Vegetarian">
                    <div class="w-1.5 h-1.5 rounded-full bg-green-600"></div>
                </div>
            @else
                <div class="w-4 h-4 border border-red-600 p-0.5 flex items-center justify-center bg-white rounded-[2px]" title="Non-Vegetarian">
                    <div class="w-1.5 h-1.5 rounded-full bg-red-600"></div>
                </div>
            @endif
        </div>

        <!-- Status Overlay -->
        @if($item->status == 'out_of_stock')
            <div class="absolute inset-0 bg-black/40 flex items-center justify-center">
                <span class="text-[9px] font-black uppercase tracking-widest text-white border-2 border-white px-2 py-1 rotate-[-10deg]">Out of Stock</span>
            </div>
        @endif
    </div>

    <!-- Content -->
    <div class="p-3 flex-1 flex flex-col">
        <div class="flex justify-between items-start mb-1">
            <h4 class="text-[11px] font-bold text-zinc-900 leading-tight truncate mr-2">{{ $item->name }}</h4>
            <span class="text-[10px] font-black text-amber-600 tracking-tighter">₹{{ number_format($item->price, 2) }}</span>
        </div>
        
        <p class="text-[9px] text-zinc-400 font-bold uppercase tracking-widest mb-1">{{ $item->category->name ?? 'Uncategorized' }}</p>
        
        @if($item->variants->count() > 0)
            <div class="mb-3 flex flex-wrap gap-1">
                @foreach($item->variants as $variant)
                    <span class="px-1.5 py-0.5 bg-zinc-50 text-zinc-600 text-[8px] font-black uppercase tracking-tighter rounded-sm border border-zinc-100">
                        {{ $variant->name }} - ₹{{ number_format($variant->dine_in_price, 0) }}
                    </span>
                @endforeach
            </div>
        @endif
        
        @if($item->description)
            <p class="text-[10px] text-zinc-500 line-clamp-2 leading-relaxed mb-4 flex-1 italic">{{ $item->description }}</p>
        @endif

        <div class="pt-3 border-t border-zinc-100 flex items-center justify-between mt-auto">
            <x-badge :variant="$item->is_active ? 'success' : 'zinc'" :label="$item->is_active ? 'Active' : 'Hidden'" />
            
            <div class="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
                <a href="{{ route('portal.items.edit', $item) }}" class="p-1 text-zinc-400 hover:text-amber-600 transition-colors">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
                </a>
            </div>
        </div>
    </div>
</div>