<x-app-layout>
<x-slot name="title">Compare Products</x-slot>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="flex items-center justify-between mb-6">
<h1 class="section-title mb-0">Compare Products</h1>
@if(!empty($products) && count($products))
<form action="{{ route('compare.clear') }}" method="POST">
@csrf @method('DELETE')
<button class="text-sm text-red-500 hover:text-red-700">Clear all</button>
</form>
@endif
</div>
@if(!empty($products) && count($products))
<div class="overflow-x-auto rounded-xl shadow-sm border border-gray-100">
<table class="min-w-full divide-y divide-gray-200 bg-white">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider w-36">Feature</th>
@foreach($products as $p)
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
<a href="{{ route('products.show', $p->slug) }}" class="hover:text-primary-600 transition-colors">
{{ $p->getTranslation('name', app()->getLocale(), false) ?? $p->name }}
</a>
<form action="{{ route('compare.remove', $p->id) }}" method="POST" class="mt-1">
@csrf @method('DELETE')
<button class="text-red-400 text-xs hover:text-red-600 font-normal normal-case tracking-normal">✕ Remove</button>
</form>
</th>
@endforeach
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-100">
{{-- Product image row --}}
<tr class="bg-white">
<td class="px-6 py-3 text-sm text-gray-500 font-medium">Image</td>
@foreach($products as $p)
<td class="px-6 py-3">
@if($p->thumbnail)
<img src="{{ $p->thumbnail }}"
alt="{{ $p->name }}"
class="w-20 h-20 object-cover rounded-lg border border-gray-100">
@else
<div class="w-20 h-20 bg-gray-100 rounded-lg flex items-center justify-center text-gray-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="2" 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"/></svg>
</div>
@endif
</td>
@endforeach
</tr>
<tr>
<td class="px-6 py-3 text-sm text-gray-500 font-medium">Price</td>
@foreach($products as $p)
<td class="px-6 py-3 text-sm font-bold text-primary-600">
{{ format_price((float) $p->price) }}
@if($p->compare_price && $p->compare_price > $p->price)
<span class="ml-1 text-xs text-gray-400 line-through font-normal">{{ format_price((float) $p->compare_price) }}</span>
@endif
</td>
@endforeach
</tr>
<tr class="bg-gray-50">
<td class="px-6 py-3 text-sm text-gray-500 font-medium">Rating</td>
@foreach($products as $p)
<td class="px-6 py-3 text-sm">
@if($p->review_count > 0)
<span class="text-amber-500">★</span>
{{ number_format($p->average_rating, 1) }}
<span class="text-gray-400">({{ $p->review_count }})</span>
@else
<span class="text-gray-300">No reviews</span>
@endif
</td>
@endforeach
</tr>
<tr>
<td class="px-6 py-3 text-sm text-gray-500 font-medium">Stock</td>
@foreach($products as $p)
<td class="px-6 py-3 text-sm">
@if($p->stock_quantity > 0)
<span class="text-emerald-600 font-medium">{{ $p->stock_quantity }} in stock</span>
@else
<span class="text-red-500">Out of stock</span>
@endif
</td>
@endforeach
</tr>
<tr class="bg-gray-50">
<td class="px-6 py-3 text-sm text-gray-500 font-medium">Category</td>
@foreach($products as $p)
<td class="px-6 py-3 text-sm text-gray-600">{{ $p->category?->name ?? '—' }}</td>
@endforeach
</tr>
<tr>
<td class="px-6 py-3 text-sm text-gray-500 font-medium">Vendor</td>
@foreach($products as $p)
<td class="px-6 py-3 text-sm text-gray-600">{{ $p->vendor?->name ?? '—' }}</td>
@endforeach
</tr>
<tr class="bg-gray-50">
<td class="px-6 py-3 text-sm text-gray-500 font-medium">Action</td>
@foreach($products as $p)
<td class="px-6 py-3">
@if($p->stock_quantity > 0)
<form action="{{ route('cart.add') }}" method="POST">
@csrf
<input type="hidden" name="product_id" value="{{ $p->id }}">
<input type="hidden" name="quantity" value="1">
<button class="btn-primary text-xs px-3 py-1.5">Add to Cart</button>
</form>
@else
<span class="text-xs text-gray-400">Unavailable</span>
@endif
</td>
@endforeach
</tr>
</tbody>
</table>
</div>
@else
<div class="card card-body text-center py-16 text-gray-400">
<svg class="w-16 h-16 mx-auto mb-4 text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
</svg>
<p class="mb-4">No products to compare yet.</p>
<a href="{{ route('products.index') }}" class="btn-primary">Browse Products</a>
</div>
@endif
</div>
</x-app-layout>