@extends('admin.layout')

@section('title', 'Products')

@section('admin-content')
<div class="flex items-center justify-between mb-8">
    <div>
        <h1 class="text-3xl font-bold text-gray-900">Products</h1>
        <p class="text-gray-500 mt-1">Manage all products</p>
    </div>
    <a href="{{ route('admin.products.create') }}" class="px-6 py-3 bg-gradient-to-r from-primary-500 to-primary-600 text-white font-semibold rounded-xl hover:from-primary-600 hover:to-primary-700 shadow-lg hover:shadow-xl transition-all flex items-center">
        <i class="fas fa-plus mr-2"></i>Add Product
    </a>
</div>

<div class="bg-white rounded-2xl shadow-card overflow-hidden">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Product</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Price</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Paired</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Status</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Deadline</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @foreach($products as $product)
            <tr class="hover:bg-gray-50 transition-all">
                <td class="px-6 py-4">
                    <div class="flex items-center">
                        @if($product->images->first())
                            <img src="{{ asset('storage/' . $product->images->first()->image_path) }}" class="w-12 h-12 rounded-xl object-cover">
                        @else
                            <div class="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center">
                                <i class="fas fa-image text-gray-400"></i>
                            </div>
                        @endif
                        <span class="ml-3 font-medium text-gray-900">{{ $product->name }}</span>
                    </div>
                </td>
                <td class="px-6 py-4">
                    <span class="font-bold text-primary-600">₦{{ number_format($product->markup_price, 0) }}</span>
                </td>
                <td class="px-6 py-4">
                    <span class="px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm font-medium">{{ $product->total_paired }}</span>
                </td>
                <td class="px-6 py-4">
                    <span class="px-3 py-1 rounded-full text-sm font-medium 
                        @if($product->status === 'active') bg-green-100 text-green-600
                        @elseif($product->status === 'paired') bg-blue-100 text-blue-600
                        @elseif($product->status === 'ordered') bg-yellow-100 text-yellow-600
                        @else bg-gray-100 text-gray-600 @endif">
                        {{ ucfirst($product->status) }}
                    </span>
                </td>
                <td class="px-6 py-4 text-gray-500 text-sm">{{ $product->pairing_deadline->format('M d, Y H:i') }}</td>
                <td class="px-6 py-4">
                    <div class="flex items-center space-x-2">
                        <a href="{{ route('admin.products.edit', $product) }}" class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-all">
                            <i class="fas fa-edit"></i>
                        </a>
                        <form method="POST" action="{{ route('admin.products.destroy', $product) }}" class="inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-all" onclick="return confirm('Delete this product?')">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<div class="mt-6">
    {{ $products->links() }}
</div>
@endsection