@extends('layouts.app') {{-- Use your main layout file --}}

@section('title', 'Products Inventory')

@section('content')
    {{-- Alpine component manages view mode and selected products --}}
    <div x-data="{
        viewMode: 'grid',
        selectedProducts: [],
        selectAll: false,
        // Get IDs of products currently loaded on this page - Ensure $products is available and paginated
        productsOnPage: {{ json_encode(isset($products) && $products instanceof \Illuminate\Pagination\LengthAwarePaginator ? $products->pluck('id') : ($products ?? collect())->pluck('id')) }},
        toggleSelectAll(event) {
            // Select/deselect all products currently listed on the page
            this.selectedProducts = event.target.checked ? [...this.productsOnPage] : [];
            this.updateSelectAllState();
        },
        updateSelectAllState() {
            // Update the 'Select All' checkbox state based on individual selections
            this.selectAll = this.productsOnPage.length >
                0 && this.selectedProducts.length === this.productsOnPage.length;
        },
        confirmBulkDelete(event) {
            // Confirmation dialog before submitting the bulk delete form
            if (this.selectedProducts.length === 0) {
                alert('Please select at least one product to delete.');
                return;
            }
            if (confirm(`Are you sure you want to delete ${this.selectedProducts.length} selected product(s)? This cannot be undone.`)) {
                const form = event.target.closest('form'); // Find the parent bulk action form
                // Remove any existing hidden inputs to prevent duplicates
                form.querySelectorAll('input[name=\'product_ids_hidden[]\']').forEach(el => el.remove());
                // Add hidden inputs for each selected product ID
                this.selectedProducts.forEach(id => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'product_ids_hidden[]'; // Use specific name for backend validation
                    input.value = id;
                    form.appendChild(input);
                });
                form.submit(); // Submit the form
            }
        }
    }" x-init="updateSelectAllState()" {{-- Initial check for select all state on load --}}>

        {{-- Header Row: Title, Add Buttons, View Toggle --}}
        <div class="md:flex md:justify-between md:items-center mb-6 gap-4">
            <h1 class="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-white flex-shrink-0 mb-4 md:mb-0">Products
                Inventory</h1>
            <div class="flex items-center justify-start md:justify-end flex-wrap gap-3">
                {{-- Add Buttons --}}
                <a href="{{ route('admin.products.create') }}"
                    class="inline-flex items-center px-3 py-1.5 border border-transparent shadow-sm text-xs font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150 ease-in-out whitespace-nowrap">+
                    Add Conventional Product</a>
                <a href="{{ route('admin.product-search.form') }}"
                    class="inline-flex items-center px-3 py-1.5 border border-transparent shadow-sm text-xs font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out whitespace-nowrap">+
                    Add Amazon Business Product</a>
                {{-- View Toggle --}}
                <div
                    class="flex space-x-1 border border-gray-300 dark:border-gray-600 rounded-md p-0.5 bg-gray-100 dark:bg-gray-700">
                    {{-- List View Button --}}
                    <button type="button"
                        @click="viewMode = 'list'; selectAll = false; selectedProducts = []; updateSelectAllState();"
                        :class="{ 'bg-white dark:bg-slate-500 shadow-sm text-indigo-700 dark:text-white': viewMode === 'list', 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300': viewMode !== 'list' }"
                        class="px-3 py-1 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-colors duration-150"
                        aria-label="List View">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-5 h-5">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
                        </svg>
                    </button>
                    {{-- Grid View Button --}}
                    <button type="button"
                        @click="viewMode = 'grid'; selectAll = false; selectedProducts = []; updateSelectAllState();"
                        :class="{ 'bg-white dark:bg-slate-500 shadow-sm text-indigo-700 dark:text-white': viewMode === 'grid', 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300': viewMode !== 'grid' }"
                        class="px-3 py-1 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-colors duration-150"
                        aria-label="Grid View">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-5 h-5">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25A2.25 2.25 0 0113.5 8.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        {{-- Search Form --}}
        <form method="GET" action="{{ route('admin.products.index') }}"
            class="mb-8 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
            <div class="flex flex-wrap items-center gap-4">
                <div class="flex-grow sm:flex-grow-0 sm:w-1/2 md:w-1/3">
                    <label for="name" class="sr-only">Search by name</label>
                    <input type="text" name="name" id="name" placeholder="Search by name..."
                        value="{{ request('name') }}"
                        class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                </div>
                <div class="flex items-center space-x-2">
                    <button type="submit"
                        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">Search</button>
                    <a href="{{ route('admin.products.index') }}"
                        class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-500 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">Clear</a>
                </div>
            </div>
        </form>

        {{-- Bulk Action Form --}}
        <form x-ref="bulkForm" method="POST" action="{{ route('admin.products.bulk-destroy') }}">
            @csrf
            @method('DELETE')

            {{-- Bulk Action Bar --}}
            <div
                class="mb-4 bg-gray-50 dark:bg-gray-700 p-3 rounded-md border border-gray-200 dark:border-gray-600 flex items-center justify-between">
                <div class="flex items-center">
                    <input type="checkbox" id="select-all" x-model="selectAll" @click="toggleSelectAll($event)"
                        class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 rounded focus:ring-indigo-500 mr-2">
                    <label for="select-all" class="text-sm text-gray-600 dark:text-gray-300 select-none">Select All (on
                        page)</label>
                </div>
                <div>
                    <button type="button" x-show="selectedProducts.length > 0" x-cloak style="display: none;"
                        @click="confirmBulkDelete($event)" :disabled="selectedProducts.length === 0"
                        class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed transition ease-in-out duration-150">
                        Delete Selected (<span x-text="selectedProducts.length"></span>)
                    </button>
                </div>
            </div>

            {{-- Container for List View (Table) --}}
            <div x-show="viewMode === 'list'" x-cloak style="display: none;">
                <div
                    class="bg-white dark:bg-gray-800 shadow-md rounded-lg border border-gray-200 dark:border-gray-700 overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-700">
                            <tr>
                                <th scope="col" class="px-4 py-3 w-12 text-center"></th>
                                <th scope="col"
                                    class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-16">
                                    Image</th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                    Name</th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                    ASIN</th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                    Type</th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                    Price</th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                    Status</th>
                                <th scope="col" class="relative px-6 py-3"><span class="sr-only">Actions</span></th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                            @forelse ($products as $product)
                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                    <td class="px-4 py-4 text-center">
                                        <input type="checkbox" name="product_ids[]" value="{{ $product->id }}"
                                            x-model="selectedProducts" @change="updateSelectAllState()"
                                            class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 rounded focus:ring-indigo-500">
                                    </td>
                                    <td class="px-4 py-3">
                                        @if ($product->image_url)
                                            <img src="{{ $product->image_url }}" alt="{{ $product->name }}"
                                                class="h-10 w-10 rounded object-contain border dark:border-gray-600">
                                        @else<div
                                                class="h-10 w-10 rounded bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-400 dark:text-gray-500 border dark:border-gray-600">
                                                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
                                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                                                </svg>
                                            </div>
                                        @endif
                                    </td>
                                    <td
                                        class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                                        {{ $product->name }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
                                        {{ $product->asin ?? 'N/A' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
                                        {{ $product->type ?? 'N/A' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
                                        ${{ number_format($product->price ?? 0, 2) }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        @if ($product->availability ?? true)
                                            <span
                                            class="font-medium text-green-600 dark:text-green-400">Available</span>@else<span
                                                class="font-medium text-red-600 dark:text-red-400">Not Available</span>
                                        @endif
                                    </td>
                                    {{-- Actions Cell - Updated with Flexbox for alignment --}}
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        {{-- Added flex items-center justify-end --}}
                                        <div class="flex items-center justify-end space-x-3">
                                            {{-- View Icon Link --}}
                                            <a href="{{ route('admin.products.show', $product) }}"
                                                class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300"
                                                title="View">
                                                <span class="sr-only">View {{ $product->name }}</span>
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                                    class="w-5 h-5">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                </svg>
                                            </a>
                                            {{-- Edit Icon Link --}}
                                            <a href="{{ route('admin.products.edit', $product) }}"
                                                class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
                                                title="Edit">
                                                <span class="sr-only">Edit {{ $product->name }}</span>
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                                    class="w-5 h-5">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                                                </svg>
                                            </a>
                                            {{-- Delete Icon Button (inside form) --}}
                                            <form action="{{ route('admin.products.destroy', $product) }}" method="POST"
                                                class="inline" onsubmit="return confirm('Delete product?');">
                                                @csrf
                                                @method('DELETE')
                                                {{-- Added flex items-center to button for consistency if needed --}}
                                                <button type="submit"
                                                    class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 flex items-center"
                                                    title="Delete">
                                                    <span class="sr-only">Delete {{ $product->name }}</span>
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                                        class="w-5 h-5">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                                    </svg>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8"
                                        class="px-6 py-12 text-center text-sm text-gray-500 dark:text-gray-400">No products
                                        found matching your criteria.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Container for Grid/Card View --}}
            <div x-show="viewMode === 'grid'" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"
                x-cloak>
                @forelse ($products as $product)
                    {{-- Product Card --}}
                    <div
                        class="relative bg-white dark:bg-gray-800 shadow-md rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col">
                        {{-- Checkbox Overlay --}}
                        <div class="absolute top-2 left-2 z-10 bg-white/70 dark:bg-black/50 rounded-sm p-0.5">
                            <input type="checkbox" name="product_ids[]" value="{{ $product->id }}"
                                x-model="selectedProducts" @change="updateSelectAllState()"
                                class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 rounded focus:ring-indigo-500">
                        </div>
                        {{-- Image Section (Link) --}}
                        <a href="{{ route('admin.products.show', $product) }}"
                            class="block h-40 bg-white dark:bg-gray-800 flex items-center justify-center flex-shrink-0 border-b border-gray-200 dark:border-gray-700 p-2 hover:opacity-90">
                            @if ($product->image_url)
                                <img class="max-h-full max-w-full object-contain" src="{{ $product->image_url }}"
                                    alt="{{ $product->name }}">
                            @else
                                <div
                                    class="h-full w-full bg-gray-50 dark:bg-gray-700 flex items-center justify-center rounded">
                                    <svg class="h-12 w-12 text-gray-300 dark:text-gray-500"
                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                                    </svg>
                                </div>
                            @endif
                        </a>
                        {{-- Content Section --}}
                        <div class="p-4 flex-grow flex flex-col">
                            <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-1 flex-grow">
                                <a href="{{ route('admin.products.show', $product) }}"
                                    class="hover:text-indigo-600 dark:hover:text-indigo-400 line-clamp-2"
                                    title="{{ $product->name }}">
                                    {{ $product->name }}
                                </a>
                            </h3>
                            <div class="mt-2 space-y-1 text-xs text-gray-500 dark:text-gray-400">
                                <p><span class="font-medium text-gray-600 dark:text-gray-300">ASIN:</span>
                                    {{ $product->asin ?? 'N/A' }}</p>
                                <p><span class="font-medium text-gray-600 dark:text-gray-300">Type:</span>
                                    {{ $product->type ?? 'N/A' }}</p>
                                <p><span class="font-medium text-gray-600 dark:text-gray-300">Price:</span>
                                    ${{ number_format($product->price ?? 0, 2) }}</p>
                                <p><span class="font-medium text-gray-600 dark:text-gray-300">Status:</span>
                                    @if ($product->availability ?? true)
                                        <span
                                        class="font-medium text-green-600 dark:text-green-400">Available</span>@else<span
                                            class="font-medium text-red-600 dark:text-red-400">Not Available</span>
                                    @endif
                                </p>
                            </div>
                        </div>
                        {{-- Actions Section --}}
                        <div
                            class="mt-auto pt-3 flex items-center justify-end space-x-3 border-t border-gray-100 dark:border-gray-700 -mx-4 px-4 -mb-4 pb-3 bg-gray-50 dark:bg-gray-700/50 rounded-b-lg">
                            {{-- Increased spacing --}}
                            {{-- View Icon Link --}}
                            <a href="{{ route('admin.products.show', $product) }}"
                                class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300"
                                title="View">
                                <span class="sr-only">View</span>
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                            </a>
                            {{-- Edit Icon Link --}}
                            <a href="{{ route('admin.products.edit', $product) }}"
                                class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
                                title="Edit">
                                <span class="sr-only">Edit</span>
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                                </svg>
                            </a>
                            {{-- Delete Icon Button (inside form) --}}
                            <form action="{{ route('admin.products.destroy', $product) }}" method="POST" class="inline"
                                onsubmit="return confirm('Delete product?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                    class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300"
                                    title="Delete">
                                    <span class="sr-only">Delete</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </div>
                @empty
                    {{-- Empty State for Grid --}}
                    <div
                        class="col-span-full bg-white dark:bg-gray-800 text-center py-10 px-4 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
                        <p class="font-medium text-gray-500 dark:text-gray-400">No products found matching your criteria.
                        </p>
                        <a href="{{ route('admin.products.index') }}"
                            class="mt-2 inline-block text-sm text-indigo-600 hover:underline">Clear search criteria</a>
                        <span class="mx-2 text-gray-300">|</span>
                        <a href="{{ route('admin.product-search.form') }}"
                            class="mt-2 inline-block text-sm text-indigo-600 hover:underline">Search & Add from Amazon?</a>
                    </div>
                @endforelse
            </div>

        </form> {{-- End Bulk Action Form --}}

        {{-- Pagination Links (Outside form and conditional blocks) --}}
        <div class="mt-8">
            @if ($products instanceof \Illuminate\Pagination\LengthAwarePaginator)
                {{ $products->appends(request()->query())->links() }}
            @endif
        </div>

    </div> {{-- End Alpine Component --}}
@endsection