@if(isset($products) && count($products))
<div class="overflow-x-auto">
    <!-- action="{{ route('productselector') }}"  method="POST"-->
    <form id="syncForm">

        @csrf
        <div class="flex flex-wrap items-center gap-4 my-4">
            <div class="flex items-center gap-2">
                <span class="text-gray-700 font-medium">Total Products:</span>
                <span id="totalProductsCount" class="pr-4 py-2   text-black rounded ">
                    -
                </span>
            </div>

            <button type="submit"   class="px-5 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition">
                Sync Selected Products
            </button>
        </div>
<table class="min-w-full table-auto border border-gray-200 rounded-lg shadow">
            <thead class="bg-gray-100 text-gray-700 text-left">
                <tr>
                    <th class="px-2 py-2 border">
                        <input type="checkbox" id="selectAll">
                    </th>
                    <th class="px-2 py-2 border">Image</th>
                    <th class="px-2 py-2 border">ID</th>
                    <th class="px-2 py-2 border">SKU</th>
                    <th class="px-2 py-2 border">Price</th>
                    <th class="px-2 py-2 border">Weight</th>
                    <th class="px-2 py-2 border">Quantity</th>
                    <th class="px-2 py-2 border">Quality</th>
                    <th class="px-2 py-2 border">Product Type</th>
                    <th class="px-2 py-2 border">Status</th>
                    <th class="px-2 py-2 border">Categories</th>
                    <th class="px-2 py-2 border">Action</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                @foreach($products as $product)
                <tr class="transition-colors duration-200 @if($product['exists_in_db']) bg-green-200 @endif"
                    data-product-json="{{ json_encode($product) }}">
                    <td class="px-2 py-2 border">
                        <input type="checkbox" name="products[]" class="product-checkbox"
                            value="{{ json_encode($product) }}" data-sku="{{ $product['SKU'] }}"
                            @if($product['exists_in_db']) disabled @endif>
                    </td>
@php
    $groupImage = $product['GroupImages'][0] ?? null;
    $fallbackImage = 'https://via.placeholder.com/80';
    $imageUrl =
        $groupImage['ThumbnailUrl'] ??
        $groupImage['FullUrl'] ??
        ($product['Images'][0]['ThumbnailUrl'] ?? null) ??
        ($product['Images'][0]['FullUrl'] ?? null) ??
        $fallbackImage;
@endphp

<td class="px-2 py-2 border">
    <img src="{{ $imageUrl }}" alt="Product Image" class="w-20 h-20 object-cover rounded">
</td>

                    <td class="px-2 py-2 border">{{ $product['Id'] ?? '-' }}</td>
                    <td class="px-2 py-2 border">{{ $product['SKU'] ?? '-' }}</td>
                    <td class="px-2 py-2 border">
                        ${{ isset($product['Price']['Value']) ? number_format($product['Price']['Value'], 4) : '-' }}
                    </td>

                    <td class="px-2 py-2 border">{{ $product['GramWeight'] ?? '-' }}g</td>
                    <td class="px-2 py-2 border">
                        @if (!empty($product['CanBeSetWith']) && isset($product['CanBeSetWith'][0]['Quantity']))
                        {{ $product['CanBeSetWith'][0]['Quantity'] }}
                        @else
                        {{ $product['OnHand']}}
                        @endif
                    </td>
                    <td class="px-2 py-2 border">
                        @php
                        $quality = collect($product['DescriptiveElementGroup']['DescriptiveElements'] ?? [])
                        ->firstWhere('Name', 'Quality');
                        @endphp
                        {{ $quality['DisplayValue'] ?? 'N/A' }}
                    </td>
                    <td class="px-2 py-2 border">{{ $product['ProductType'] ?? '-' }}</td>
                    <td class="px-2 py-2 border">{{ $product['Status'] ?? '-' }}</td>                 
<td class="px-2 py-2 border">
    {{ isset($product['WebCategories']) 
        ? collect($product['WebCategories'])->pluck('Name')->filter()->unique()->implode(', ') 
        : 'N/A' }}
</td>

   <td class="px-2 py-2 border">
                        <button type="button" onclick="openModal({{ json_encode($product) }})"
                            class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                            View
                        </button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </form>
</div>
<div id="toast-container" class="fixed top-4 right-4 space-y-2 z-50"></div>

@else
<p class="text-gray-500 mt-6">No products found.</p>
@endif

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
    // Set up form submission handler (only once)
    $('#syncForm').on('submit', function(e) {
        e.preventDefault();
        handleFormSubmission();
    });
});

function handleFormSubmission() {
    const syncForm = $('#syncForm');
    const checkboxes = $('.product-checkbox:checked');
    const selectedProducts = checkboxes.map(function() {
        try {
            return JSON.parse($(this).val());
        } catch (error) {
            console.error('Error parsing product data:', error);
            return null;
        }
    }).get().filter(Boolean);

    if (selectedProducts.length === 0) {
        showToast('Please select at least one product to sync', 'error');
        return;
    }

    const submitBtn = syncForm.find('button[type="submit"]');
    const originalBtnText = submitBtn.html();

    try {
        submitBtn.prop('disabled', true).html('Syncing...');
        
        const formData = new FormData();
        selectedProducts.forEach(product => {
            formData.append('products[]', JSON.stringify(product));
        });

        $.ajax({
            url: "{{ route('productselector') }}",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            },
            success: function(response) {
                showToast(`✅ ${response.message} (${response.queued_count} product(s))`, 'success');
                
                // Optional: Update UI to show synced products
                checkboxes.closest('tr').addClass('bg-green-200');
                checkboxes.prop('disabled', true);
            },
            error: function(xhr) {
                console.error('Sync error:', xhr.responseText);
                showToast('❌ Sync failed. Check any missing for details. price,description', 'error');
            },
            complete: function() {
                submitBtn.prop('disabled', false).html(originalBtnText);
            }
        });
    } catch (error) {
        console.error('Sync error:', error);
        showToast('❌ Sync failed. Check console for any missing for details. price,description.', 'error');
        submitBtn.prop('disabled', false).html(originalBtnText);
    }
}
</script>