@extends('layouts.app')

@section('title', __('products.index_title'))

@section('content')
    <div x-data="{
        viewMode: 'grid',
        selectedProducts: [],
        selectAll: false,
        productsOnPage: {{ json_encode($products instanceof \Illuminate\Support\Collection || $products instanceof \Illuminate\Pagination\LengthAwarePaginator ? $products->pluck('id')->toArray() : []) }},
        availableCampaigns: {{ json_encode($campaigns->map->only(['id', 'title'])->toArray()) }},
        selectedCampaignForBulkAdd: '',
        bulkActionMessage: '',
        bulkActionError: false,
        isLoading: false,
    
        toggleSelectAll(event) {
            this.selectedProducts = event.target.checked ? [...this.productsOnPage] : [];
            this.updateSelectAllState();
        },
        updateSelectAllState() {
            this.selectAll = this.productsOnPage.length > 0 && this.selectedProducts.length === this.productsOnPage.length;
        },
        confirmBulkDelete(event) {
            if (this.selectedProducts.length === 0) {
                alert('{{ __('products.index_bulk_delete_no_selection') }}');
                return;
            }
            if (confirm(`{{ __('products.index_bulk_delete_confirm') }} ${this.selectedProducts.length} {{ __('products.index_bulk_delete_confirm_suffix') }}`)) {
                const form = event.target.closest('form#bulkActionForm');
                form.querySelector('input[name=_method]').value = 'DELETE';
                form.action = '{{ route('admin.products.bulk-destroy') }}';
                form.querySelectorAll('input[name^=\'product_ids\']').forEach(el => el.remove());
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'product_ids';
                input.value = JSON.stringify(this.selectedProducts);
                form.appendChild(input);
                form.submit();
            }
        },
        async handleBulkAddToCampaign() {
            this.bulkActionMessage = '';
            this.bulkActionError = false;
            this.isLoading = true;
            if (this.selectedProducts.length === 0) {
                this.bulkActionMessage = '{{ __('products.index_bulk_no_selection') }}';
                this.bulkActionError = true;
                this.isLoading = false;
                return;
            }
            if (!this.selectedCampaignForBulkAdd) {
                this.bulkActionMessage = '{{ __('products.index_bulk_no_campaign') }}';
                this.bulkActionError = true;
                this.isLoading = false;
                return;
            }
            if (!confirm(`{{ __('products.index_bulk_assign_confirm') }} ${this.selectedProducts.length} {{ __('products.index_bulk_assign_confirm_suffix') }}`)) {
                this.isLoading = false;
                return;
            }
            try {
                const response = await fetch('{{ route('admin.products.bulk-assign-campaign') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        product_ids: this.selectedProducts,
                        campaign_id: this.selectedCampaignForBulkAdd,
                        _token: '{{ csrf_token() }}'
                    })
                });
                const { status, body } = await response.json().then(data => ({ status: response.status, body: data }));
                this.bulkActionMessage = body.message || '{{ __('products.index_bulk_action_success') }}';
                if (status >= 400) {
                    this.bulkActionError = true;
                    if (body.errors) {
                        this.bulkActionMessage += ' {{ __('products.index_bulk_action_errors') }} ' + Object.values(body.errors).flat().join(' ');
                    }
                } else {
                    this.bulkActionError = false;
                    this.selectedProducts = [];
                    this.selectAll = false;
                    this.updateSelectAllState();
                }
            } catch (error) {
                this.bulkActionMessage = '{{ __('products.index_bulk_action_error') }}: ' + error.message;
                this.bulkActionError = true;
            } finally {
                this.isLoading = false;
            }
        }
    }" x-init="updateSelectAllState()">

        <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.index_title') }}
            </h1>
            <div class="flex items-center justify-start md:justify-end flex-wrap gap-3">
                <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">
                    + {{ __('products.index_add_conventional') }}
                </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">
                    + {{ __('products.index_add_amazon') }}
                </a>
                <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">
                    <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="{{ __('products.index_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>
                    <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="{{ __('products.index_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>

        <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">{{ __('products.index_search_placeholder') }}</label>
                    <input type="text" name="name" id="name"
                        placeholder="{{ __('products.index_search_placeholder') }}" 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">
                        {{ __('products.index_search_button') }}
                    </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">
                        {{ __('products.index_clear_button') }}
                    </a>
                </div>
            </div>
        </form>

        <form id="bulkActionForm" method="POST" action="">
            @csrf
            <input type="hidden" name="_method" value="POST">
            <input type="hidden" name="campaign_id" :value="selectedCampaignForBulkAdd">

            <div
                class="mb-4 bg-gray-50 dark:bg-gray-700 p-3 rounded-md border border-gray-200 dark:border-gray-600 flex flex-wrap items-center justify-between gap-4">
                <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">{{ __('products.index_select_all') }}</label>
                    <span x-show="selectedProducts.length > 0" x-cloak
                        class="ml-2 text-sm text-gray-500 dark:text-gray-400">(<span
                            x-text="selectedProducts.length"></span> {{ __('products.index_selected') }})</span>
                </div>

                <div x-show="selectedProducts.length > 0" x-cloak class="flex items-center space-x-3">
                    <div>
                        <label for="bulk_campaign_id"
                            class="sr-only">{{ __('products.index_bulk_campaign_placeholder') }}</label>
                        <select x-model="selectedCampaignForBulkAdd" id="bulk_campaign_id"
                            class="block w-full sm:w-auto pl-3 pr-10 py-1.5 text-xs border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 rounded-md appearance-none">
                            <option value="">{{ __('products.index_bulk_campaign_placeholder') }}</option>
                            <template x-for="campaign in availableCampaigns" :key="campaign.id">
                                <option :value="campaign.id" x-text="campaign.title"></option>
                            </template>
                        </select>
                    </div>
                    <button type="button" @click="handleBulkAddToCampaign()"
                        :disabled="!selectedCampaignForBulkAdd || selectedProducts.length === 0 || isLoading"
                        class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-sky-600 hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 disabled:opacity-50 disabled:cursor-not-allowed">
                        <span x-show="isLoading" class="mr-2">
                            <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
                                viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                    stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor"
                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                </path>
                            </svg>
                        </span>
                        {{ __('products.index_bulk_assign') }}
                    </button>
                    <span class="text-gray-300 dark:text-gray-600">|</span>
                    <button type="button" @click="confirmBulkDelete($event)"
                        :disabled="selectedProducts.length === 0 || isLoading"
                        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">
                        {{ __('products.index_bulk_delete') }}
                    </button>
                </div>
            </div>

            <div x-show="bulkActionMessage" x-cloak class="mb-4 p-3 rounded-md text-sm"
                :class="{ 'bg-green-50 dark:bg-green-900/50 border border-green-300 dark:border-green-700 text-green-700 dark:text-green-200':
                        !
                        bulkActionError, 'bg-red-50 dark:bg-red-900/50 border border-red-300 dark:border-red-700 text-red-700 dark:text-red-200': bulkActionError }"
                x-text="bulkActionMessage">
            </div>

            <div x-show="viewMode === 'list'" x-cloak>
                <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">
                                    {{ __('products.index_table_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">
                                    {{ __('products.index_table_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">
                                    {{ __('products.index_table_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">
                                    {{ __('products.index_table_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">
                                    {{ __('products.index_table_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">
                                    {{ __('products.index_table_status') }}
                                </th>
                                <th scope="col" class="relative px-6 py-3"><span
                                        class="sr-only">{{ __('products.index_table_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">{{ __('products.status_available') }}</span>
                                        @else
                                            <span
                                                class="font-medium text-red-600 dark:text-red-400">{{ __('products.status_not_available') }}</span>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <div class="flex items-center justify-end space-x-3">
                                            <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="{{ __('products.index_table_view') }}">
                                                <span class="sr-only">{{ __('products.index_table_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>
                                            @if ($product->type !== 'abproduct')
                                                <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="{{ __('products.index_table_edit') }}">
                                                    <span class="sr-only">{{ __('products.index_table_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>
                                            @endif
                                            <form action="{{ route('admin.products.destroy', $product) }}" method="POST"
                                                class="inline"
                                                onsubmit="return confirm('{{ __('products.index_table_delete_confirm') }}');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit"
                                                    class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300"
                                                    title="{{ __('products.index_table_delete') }}">
                                                    <span class="sr-only">{{ __('products.index_table_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">
                                        {{ __('products.index_no_products') }}
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <div x-show="viewMode === 'grid'" x-cloak
                class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
                @forelse ($products as $product)
                    <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">
                        <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>
                        <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>
                        <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">{{ __('products.index_table_asin') }}:</span>
                                    {{ $product->asin ?? 'N/A' }}</p>
                                <p><span
                                        class="font-medium text-gray-600 dark:text-gray-300">{{ __('products.index_table_type') }}:</span>
                                    {{ $product->type ?? 'N/A' }}</p>
                                <p><span
                                        class="font-medium text-gray-600 dark:text-gray-300">{{ __('products.index_table_price') }}:</span>
                                    ${{ number_format($product->price ?? 0, 2) }}</p>
                                <p><span
                                        class="font-medium text-gray-600 dark:text-gray-300">{{ __('products.index_table_status') }}:</span>
                                    @if ($product->availability ?? true)
                                        <span
                                            class="font-medium text-green-600 dark:text-green-400">{{ __('products.status_available') }}</span>
                                    @else
                                        <span
                                            class="font-medium text-red-600 dark:text-red-400">{{ __('products.status_not_available') }}</span>
                                    @endif
                                </p>
                            </div>
                        </div>
                        <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">
                            <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="{{ __('products.index_table_view') }}">
                                <span class="sr-only">{{ __('products.index_table_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>
                            @if ($product->type !== 'abproduct')
                                <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="{{ __('products.index_table_edit') }}">
                                    <span class="sr-only">{{ __('products.index_table_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>
                            @endif
                            <form action="{{ route('admin.products.destroy', $product) }}" method="POST" class="inline"
                                onsubmit="return confirm('{{ __('products.index_table_delete_confirm') }}');">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                    class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300"
                                    title="{{ __('products.index_table_delete') }}">
                                    <span class="sr-only">{{ __('products.index_table_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
                    <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">
                            {{ __('products.index_no_products') }}</p>
                        <a href="{{ route('admin.products.index') }}"
                            class="mt-2 inline-block text-sm text-indigo-600 hover:underline">{{ __('products.index_clear_button') }}</a>
                    </div>
                @endforelse
            </div>
        </form>

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