@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-6">
    <h2 class="text-2xl font-bold mb-2">Shopify Synced Products</h2>

    <div class="overflow-x-auto bg-white shadow-md rounded-lg p-4">
        <form action="{{ route('shopify.products.bulkDestroy') }}" method="POST">
            @csrf
            @method('DELETE')
<div class="mb-4">
                <button type="submit" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">
                    Delete Selected Products
                </button>
            </div>

            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50 text-left text-sm font-semibold text-gray-700">
                    <tr>
                        <td class="px-2 py-2 border">
                            <input type="checkbox" id="selectAll">
                        </td>
                        <th class="px-4 py-3">Image</th>
                        <th class="px-4 py-3">ID</th>
                        <th class="px-4 py-3">Title</th>
                        <th class="px-4 py-3">SKU</th>
                        <th class="px-4 py-3">Price</th>
                        <th class="px-4 py-3">Weight</th>
                        <th class="px-4 py-3">Size</th>
                        <th class="px-4 py-3">Status</th>
                        <th class="px-4 py-3">Quantity</th>
                        <th class="px-4 py-3">Updated At</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 text-sm">
                    @foreach ($products as $product)
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-2 py-2 border">
                            <input type="checkbox" name="products[]" value="{{ $product->id }}" class="product-checkbox">
                        </td>

                        @php
                            $images = json_decode($product->images, true);
                            $image = 'https://via.placeholder.com/80';
                            if (!empty($images[0])) {
                                $image = is_array($images[0]) ? ($images[0]['src'] ?? $image) : $images[0];
                            }
                        @endphp

                        <td class="px-4 py-2">
                            <img src="{{ $image }}" alt="Product Image" class="w-16 h-16 object-cover rounded">
                        </td>
                        <td class="px-4 py-2">{{ $product->external_id }}</td>
                        <td class="px-4 py-2">{{ $product->title }}</td>
                        <td class="px-4 py-2">{{ $product->sku }}</td>
                        <td class="px-4 py-2">${{ number_format($product->price, 0) }}</td>
                        <td class="px-4 py-2">{{ $product->weight }}</td>
                        <td class="px-4 py-2">{{ $product->size }}</td>
                        <td class="px-4 py-2">
                            <span class="inline-block px-2 py-1 rounded text-xs font-medium 
                                {{ $product->status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600' }}">
                                {{ ucfirst($product->status) }}
                            </span>
                        </td>
                        <td class="px-4 py-2">{{ $product->quantity }}</td>
                        <td class="px-4 py-2">{{ $product->updated_at->format('d M Y') }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>

            
        </form>
    </div>

    <div class="sticky bottom-0 left-0 w-full bg-white shadow-md py-3 flex justify-center items-center gap-2 z-50 border-t">
        {{ $products->links() }}
    </div>
</div>

<script>
    // Select/Deselect all checkboxes
    document.getElementById('selectAll').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.product-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });
</script>

@endsection