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

@section('title', 'Amazon Business Product Search')

@section('content')

    <h1 class="text-2xl md:text-3xl font-semibold text-gray-800 mb-6">
        Search Amazon Business Products
    </h1>

    {{-- Search Form Container --}}
    <div class="mb-8 bg-white shadow-md rounded-lg p-6 border border-gray-200">
        <form id="product-search-form" class="space-y-6">
            {{-- Keywords, Region, Locale Row --}}
            <div class="md:flex md:items-end md:gap-x-4">
                {{-- Keywords Input --}}
                <div class="flex-grow mb-4 md:mb-0">
                    <label for="keywords" class="block text-sm font-medium text-gray-700 mb-1">Keywords <span
                            class="text-red-500">*</span></label>
                    <input type="text" id="keywords" name="keywords" required placeholder="e.g., office chair, laptop"
                        class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                </div>
                {{-- Region Select --}}
                <div class="w-full md:w-1/4 mb-4 md:mb-0">
                    <label for="productRegion" class="block text-sm font-medium text-gray-700 mb-1">Region <span
                            class="text-red-500">*</span></label>
                    <select id="productRegion" name="productRegion" required
                        class="block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none">
                        <option value="US">US</option>
                        <option value="CA">CA</option>
                        {{-- Add other supported regions --}}
                    </select>
                </div>
                {{-- Locale Select --}}
                <div class="w-full md:w-1/4">
                    <label for="locale" class="block text-sm font-medium text-gray-700 mb-1">Locale <span
                            class="text-red-500">*</span></label>
                    <select id="locale" name="locale" required
                        class="block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none">
                        <option value="en_US">en_US</option>
                        <option value="fr_CA">fr_CA</option>
                        {{-- Add other supported locales --}}
                    </select>
                </div>
            </div>

            {{-- Facets Checkboxes --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Facets (Optional - Select multiple):</label>
                <div class="flex flex-wrap gap-x-6 gap-y-2">
                    <div class="flex items-center"><input id="facet_offers" name="facets[]" value="OFFERS" type="checkbox"
                            class="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500" checked><label
                            for="facet_offers" class="ml-2 block text-sm text-gray-900 cursor-pointer">Offers</label></div>
                    <div class="flex items-center"><input id="facet_images" name="facets[]" value="IMAGES" type="checkbox"
                            class="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500" checked><label
                            for="facet_images" class="ml-2 block text-sm text-gray-900 cursor-pointer">Images</label></div>
                    <div class="flex items-center"><input id="facet_categories" name="facets[]" value="CATEGORIES"
                            type="checkbox"
                            class="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"><label
                            for="facet_categories"
                            class="ml-2 block text-sm text-gray-900 cursor-pointer">Categories</label></div>
                    <div class="flex items-center"><input id="facet_brands" name="facets[]" value="BRANDS" type="checkbox"
                            class="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"><label
                            for="facet_brands" class="ml-2 block text-sm text-gray-900 cursor-pointer">Brands</label></div>
                </div>
            </div>

            {{-- Submit Button --}}
            <div class="pt-2">
                <button type="submit"
                    class="inline-flex justify-center py-2 px-4 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 Products
                </button>
            </div>
        </form>
    </div> {{-- End Form Container --}}


    {{-- Results Area --}}
    <hr class="my-8 border-gray-300">

    {{-- Alpine component for results area view toggle --}}
    <div x-data="{ viewMode: 'grid' }">

        {{-- Results Header: Title and View Toggle --}}
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-semibold text-gray-800">Results</h2>
            {{-- View Mode Toggle Buttons --}}
            <div class="flex space-x-1 border border-gray-300 rounded-md p-0.5 bg-gray-100">
                <button type="button"
                    @click="viewMode = 'list'; selectAll = false; selectedProducts = []; updateSelectAllState();"
                    :class="{ 'bg-white shadow-sm text-indigo-700': viewMode === 'list', 'text-gray-500 hover:text-gray-700': 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>
                <button type="button"
                    @click="viewMode = 'grid'; selectAll = false; selectedProducts = []; updateSelectAllState();"
                    :class="{ 'bg-white shadow-sm text-indigo-700': viewMode === 'grid', 'text-gray-500 hover:text-gray-700': 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>

        {{-- Loading Indicator --}}
        <div id="loading-indicator" style="display: none;" class="text-center py-10">
            <svg class="animate-spin h-8 w-8 text-indigo-600 mx-auto" 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>
            <p class="mt-2 text-sm text-gray-600">Loading Results...</p>
        </div>

        {{-- Container for both list and grid results (attach event listener here) --}}
        <div id="search-results-container">
            {{-- List View Container --}}
            <div id="search-results-list" x-show="viewMode === 'list'" class="space-y-4" x-cloak style="display: none;">
                {{-- List items will be injected here by JS --}}
            </div>

            {{-- Grid View Container --}}
            {{-- Responsive columns adjusted slightly --}}
            <div id="search-results-grid" x-show="viewMode === 'grid'"
                class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" x-cloak>
                {{-- Grid cards will be injected here by JS --}}
            </div>

            {{-- Initial message / No results message area --}}
            <div id="search-results-message" class="mt-4 text-gray-700 text-center py-6">
                <p>Enter search criteria above and click Search.</p>
            </div>
        </div>

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

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Get references to elements
            const searchForm = document.getElementById('product-search-form');
            const resultsContainer = document.getElementById('search-results-container');
            const resultsListDiv = document.getElementById('search-results-list');
            const resultsGridDiv = document.getElementById('search-results-grid');
            const resultsMessageDiv = document.getElementById('search-results-message');
            const loadingIndicator = document.getElementById('loading-indicator');

            // Check if essential elements exist
            if (!searchForm || !resultsContainer || !resultsListDiv || !resultsGridDiv || !resultsMessageDiv || !
                loadingIndicator) {
                console.error('Error: One or more essential elements for product search are missing!');
                return;
            }

            // Escape HTML helper
            function escapeHtml(unsafe) {
                if (typeof unsafe !== 'string') return '';
                return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g,
                    "&quot;").replace(/'/g, "&#039;");
            }

            // Placeholder SVG definitions
            const placeholderSvg =
                `<svg class="h-8 w-8 text-gray-300" 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>`;
            const placeholderSvgLarge =
                `<svg class="h-12 w-12 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" 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>`;

            // Render List Item function
            function renderListItem(product) {
                // Extract data safely
                const imageUrl = product?.includedDataTypes?.IMAGES?.[0]?.medium?.url;
                const title = product?.title || 'No Title Available';
                const asin = product?.asin || 'No ASIN';
                const productUrl = product?.url || '#';
                const offer = product?.includedDataTypes?.OFFERS?.[0];
                const priceAmount = offer?.price?.value?.amount;
                const currencyCode = offer?.price?.value?.currencyCode || 'USD';
                const availability = offer?.availability;
                const description = product?.productDescription || ''; // For data attributes

                if (!imageUrl) {
                    console.log(`List Render: Product ${asin} missing image at expected path.`);
                }

                // Price Formatting
                let priceHtml = '<span class="text-sm text-gray-500">N/A</span>';
                if (priceAmount !== null && priceAmount !== undefined && typeof priceAmount === 'number') {
                    const formattedPrice = new Intl.NumberFormat(undefined, {
                        style: 'currency',
                        currency: currencyCode
                    }).format(priceAmount);
                    priceHtml = `<span class="font-semibold text-gray-900">${escapeHtml(formattedPrice)}</span>`;
                }

                // Availability Formatting
                let availabilityHtml = '<span class="text-gray-500">Unknown</span>';
                if (availability) {
                    const isAvailable = availability.toLowerCase().includes('in stock');
                    availabilityHtml =
                        `<span class="${isAvailable ? 'text-green-600' : 'text-red-600'}">${escapeHtml(availability)}</span>`;
                }

                // Add Button HTML
                const svgButtonHtml = `
                    <button type="button"
                            class="add-product-svg-button text-green-600 p-1 rounded-full hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150 ease-in-out ml-auto flex-shrink-0"
                            title="Add ${escapeHtml(title)} to DB"
                            data-asin="${escapeHtml(asin)}" data-name="${escapeHtml(title)}" data-image-url="${escapeHtml(imageUrl || '')}"
                            data-product-url="${escapeHtml(productUrl || '')}" data-description="${escapeHtml(description)}"
                            data-price="${(priceAmount !== null && priceAmount !== undefined) ? escapeHtml(priceAmount.toString()) : ''}">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7 pointer-events-none"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                    </button>`;

                // List Item HTML Structure
                const listItem = document.createElement('div');
                // Add product-card class for consistent event listener targeting
                listItem.className =
                    'product-card product-list-item flex items-center space-x-4 p-4 bg-white border border-gray-200 rounded-lg shadow-sm';
                listItem.innerHTML = `
                    <div class="flex-shrink-0 w-16 h-16 bg-gray-50 rounded flex items-center justify-center border overflow-hidden">
                        ${imageUrl ? `<img src="${escapeHtml(imageUrl)}" alt="${escapeHtml(title)}" class="max-h-full max-w-full object-contain">` : `<div class="p-1">${placeholderSvg}</div>`}
                    </div>
                    <div class="flex-grow min-w-0">
                        <h3 class="text-sm font-medium text-gray-900 truncate">
                            <a href="${productUrl}" target="_blank" rel="noopener noreferrer" class="hover:text-indigo-600" title="${escapeHtml(title)}">${escapeHtml(title)}</a>
                        </h3>
                        <p class="text-xs text-gray-500">ASIN: ${escapeHtml(asin)}</p>
                        <p class="text-xs text-gray-500">Price: ${priceHtml}</p>
                        <p class="text-xs">Status: ${availabilityHtml}</p>
                    </div>
                    ${svgButtonHtml}
                `;
                return listItem;
            }

            // Render Grid Card function
            function renderGridCard(product) {
                // Extract data safely
                const imageUrl = product?.includedDataTypes?.IMAGES?.[0]?.medium?.url;
                const title = product?.title || 'No Title Available';
                const asin = product?.asin || 'No ASIN';
                const productUrl = product?.url || '#';
                const badges = product?.badges;
                const rating = product?.customerReviewsSummary?.starRating;
                const ratingCount = product?.customerReviewsSummary?.numberOfRatings;
                const offer = product?.includedDataTypes?.OFFERS?.[0];
                const priceAmount = offer?.price?.value?.amount;
                const currencyCode = offer?.price?.value?.currencyCode || 'USD';
                const priceType = offer?.price?.priceType;
                const quantityTiers = offer?.quantityPrice?.quantityPriceTiers;
                const description = product?.productDescription || '';

                if (!imageUrl) {
                    console.log(`Grid Render: Product ${asin} missing image at expected path.`);
                }

                // Badges HTML
                let badgesHtml = '';
                if (badges && Array.isArray(badges) && badges.length > 0) {
                    badgesHtml += '<div class="absolute top-0 left-0 p-2 flex flex-wrap gap-1 z-10">';
                    badges.forEach(badge => {
                        const badgeTitle = badge?.fragment?.title;
                        if (badgeTitle) {
                            badgesHtml +=
                                `<span class="inline-block whitespace-nowrap rounded bg-orange-600 px-2 py-0.5 text-[11px] font-medium text-white shadow-sm">${escapeHtml(badgeTitle)}</span>`;
                        }
                    });
                    badgesHtml += '</div>';
                }

                // Image HTML
                let imageHtml = '';
                const imageContainerBaseClasses =
                    "h-40 flex items-center justify-center flex-shrink-0 relative overflow-hidden border-b border-gray-200 p-2 bg-white";
                if (imageUrl) {
                    imageHtml =
                        `<div class="${imageContainerBaseClasses}"><img src="${escapeHtml(imageUrl)}" alt="${escapeHtml(title)}" class="max-h-full max-w-full object-contain">${badgesHtml}</div>`;
                } else {
                    imageHtml =
                        `<div class="${imageContainerBaseClasses}"><div class="h-full w-full bg-gray-50 flex items-center justify-center rounded">${placeholderSvgLarge}</div>${badgesHtml}</div>`;
                }

                // Price HTML
                let priceHtml = '';
                if (priceAmount !== null && priceAmount !== undefined && typeof priceAmount === 'number') {
                    const formattedPrice = new Intl.NumberFormat(undefined, {
                        style: 'currency',
                        currency: currencyCode
                    }).format(priceAmount);
                    priceHtml =
                        `<p class="text-lg font-bold text-gray-900 my-1">${escapeHtml(formattedPrice)}${priceType === 'BUSINESS' ? '<span class="text-xs font-normal text-gray-500 ml-1">(Business Price)</span>' : ''}</p>`;
                    if (quantityTiers && Array.isArray(quantityTiers) && quantityTiers.length > 1) {
                        priceHtml +=
                            `<p class="text-xs text-green-700 -mt-1 mb-2">Quantity discounts available</p>`;
                    } else {
                        priceHtml += `<div class="mb-2 h-[18px]"></div>`;
                    } // Keep consistent height approx
                } else {
                    priceHtml += `<div class="mb-2 h-[46px]"></div>`;
                } // Approx height of price + qty discount line

                // Ratings HTML
                let ratingsHtml = '';
                if (rating !== null && rating !== undefined && typeof rating === 'number' && rating > 0) {
                    const roundedRating = Math.round(rating * 2) / 2;
                    let stars = '';
                    for (let i = 1; i <= 5; i++) {
                        stars += (roundedRating >= i) ? '<span class="text-yellow-400">★</span>' : (roundedRating >=
                            i - 0.5 ?
                            '<span class="text-yellow-400">★</span><span class="text-gray-300">☆</span>' :
                            '<span class="text-gray-300">☆</span>');
                    } // Simple full/empty star approx
                    const countText = (ratingCount !== null && ratingCount !== undefined && typeof ratingCount ===
                        'number') ? ` (${ratingCount.toLocaleString()})` : '';
                    ratingsHtml =
                        `<div class="flex items-center mt-1 mb-2 h-[20px]"><div class="text-sm" aria-label="${escapeHtml(rating.toFixed(1))} out of 5 stars">${stars}</div><span class="ml-1 text-xs text-gray-500">${escapeHtml(rating.toFixed(1))}${escapeHtml(countText)}</span></div>`;
                } else {
                    ratingsHtml += `<div class="mb-2 h-[20px]"></div>`;
                } // Spacer if no rating

                // Add Button HTML
                const svgButtonHtml = `
                    <button type="button"
                            class="add-product-svg-button text-green-600 p-1 rounded-full hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150 ease-in-out"
                            title="Add ${escapeHtml(title)} to DB"
                            data-asin="${escapeHtml(asin)}" data-name="${escapeHtml(title)}" data-image-url="${escapeHtml(imageUrl || '')}"
                            data-product-url="${escapeHtml(productUrl || '')}" data-description="${escapeHtml(description)}"
                            data-price="${(priceAmount !== null && priceAmount !== undefined) ? escapeHtml(priceAmount.toString()) : ''}">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 pointer-events-none"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                    </button>`;

                // Card Content HTML
                const contentHtml = `
                    <div class="p-3 flex-grow flex flex-col justify-between">
                        <div>
                            <h3 class="text-sm font-semibold text-gray-800 mb-1 leading-snug h-12"> {{-- Fixed height for title area --}}
                                <a href="${productUrl}" target="_blank" rel="noopener noreferrer" class="hover:text-indigo-600 line-clamp-3" title="${escapeHtml(title)}">${escapeHtml(title)}</a>
                            </h3>
                            <p class="text-xs text-gray-500 mb-1">ASIN: ${escapeHtml(asin)}</p>
                            ${priceHtml}
                            ${ratingsHtml}
                        </div>
                        <div class="mt-auto pt-2 flex justify-between items-center">
                            <a href="${productUrl}" target="_blank" rel="noopener noreferrer" class="text-xs text-indigo-600 hover:text-indigo-800 font-medium">View on Amazon &rarr;</a>
                            ${svgButtonHtml}
                        </div>
                    </div>`;

                const card = document.createElement('div');
                // Add product-card class for consistent event listener targeting
                card.className =
                    'product-card border border-gray-200 rounded-lg shadow-sm bg-white overflow-hidden flex flex-col';
                card.innerHTML = imageHtml + contentHtml;
                return card;
            }

            // Form Submit Handler
            searchForm.addEventListener('submit', function(event) {
                event.preventDefault();
                const formData = new FormData(searchForm);
                const searchParams = new URLSearchParams(formData).toString();
                const requestUrl = `{{ route('admin.product-search.execute') }}?${searchParams}`;

                // Clear results, show loading
                resultsListDiv.innerHTML = '';
                resultsGridDiv.innerHTML = '';
                resultsGridDiv.className =
                    'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6'; // Ensure grid class is set
                resultsMessageDiv.innerHTML = '';
                resultsMessageDiv.style.display = 'none';
                loadingIndicator.style.display = 'block';

                fetch(requestUrl, {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => {
                        // Robust response handling
                        return response.clone().text().then(rawBody => {
                            if (!response.ok) {
                                return response.json().catch(() => rawBody)
                                    .then(errData => {
                                        const message = errData?.message || (
                                            typeof errData === 'string' ? errData :
                                            `Server Error: ${response.status}`);
                                        const httpError = new Error(message);
                                        httpError.status = response.status;
                                        httpError.data = errData;
                                        throw httpError;
                                    });
                            }
                            // Try parsing JSON even if body might be empty
                            return response.json().catch(jsonError => {
                                console.warn(
                                    "Could not parse JSON, might be empty response:",
                                    jsonError);
                                return {
                                    jsonData: null,
                                    rawBody: rawBody
                                }; // Return structure indicating parsing issue or empty body
                            }).then(jsonData => ({
                                jsonData,
                                rawBody
                            }));
                        });
                    })
                    .then(({
                        jsonData,
                        rawBody
                    }) => {
                        loadingIndicator.style.display = 'none';
                        const data = jsonData; // data might be null if JSON parsing failed

                        if (!data || !data.products || !Array.isArray(data.products) || data.products
                            .length === 0) {
                            resultsMessageDiv.innerHTML =
                                '<p>No products found matching your criteria.</p>';
                            resultsMessageDiv.style.display = 'block';
                            resultsListDiv.innerHTML = ''; // Ensure lists are empty
                            resultsGridDiv.innerHTML = '';
                        } else {
                            resultsMessageDiv.style.display = 'none';
                            try {
                                data.products.forEach((product, index) => {
                                    if (!product) return;
                                    const listItem = renderListItem(product);
                                    const gridCard = renderGridCard(product);
                                    resultsListDiv.appendChild(listItem);
                                    resultsGridDiv.appendChild(gridCard);
                                });
                            } catch (renderError) {
                                console.error('Error during rendering:', renderError);
                                resultsMessageDiv.innerHTML =
                                    '<p class="text-red-600">An error occurred while displaying results.</p>';
                                resultsMessageDiv.style.display = 'block';
                            }
                        }
                    })
                    .catch(error => {
                        loadingIndicator.style.display = 'none';
                        console.error('Fetch Error:', error);
                        resultsMessageDiv.innerHTML =
                            `<p class="text-red-600">Search failed: ${escapeHtml(error.message || 'Unknown error')}</p>`;
                        if (error.data && typeof error.data ===
                            'object') { // Display server error details if available
                            resultsMessageDiv.innerHTML +=
                                `<pre class="text-xs text-left mt-2 p-2 bg-red-50 border border-red-200 rounded">${escapeHtml(JSON.stringify(error.data, null, 2))}</pre>`;
                        }
                        resultsMessageDiv.style.display = 'block';
                        resultsListDiv.innerHTML = ''; // Ensure lists are empty on error
                        resultsGridDiv.innerHTML = '';
                    });
            }); // End submit listener

            // Delegated click listener for Add buttons
            resultsContainer.addEventListener('click', function(event) {
                const buttonElement = event.target.closest('.add-product-svg-button');
                if (buttonElement) {
                    // ... (Add to DB logic using fetch to admin.internal.products.store as before) ...
                    // Ensure this logic is complete and correct
                    console.log('Add to DB Clicked for ASIN:', buttonElement.dataset.asin);
                    const cardElement = buttonElement.closest('.product-card'); // Target common class
                    if (!cardElement) {
                        console.error('Could not find parent card element!');
                        return;
                    }
                    if (buttonElement.classList.contains('processing')) {
                        return;
                    }

                    const productData = {
                        asin: buttonElement.dataset.asin,
                        name: buttonElement.dataset.name,
                        image_url: buttonElement.dataset.imageUrl,
                        product_url: buttonElement.dataset.productUrl,
                        description: buttonElement.dataset.description,
                        price: (buttonElement.dataset.price !== '' && !isNaN(parseFloat(buttonElement
                                .dataset.price))) ? parseFloat(buttonElement.dataset.price) :
                            null // Parse price
                    };
                    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute(
                        'content');
                    if (!csrfToken) {
                        alert('CSRF Token missing!');
                        return;
                    }

                    buttonElement.classList.add('processing', 'opacity-50', 'cursor-not-allowed');
                    buttonElement.disabled = true;
                    cardElement.classList.add('ring-2', 'ring-indigo-300', 'ring-offset-2');
                    const svgIcon = buttonElement.querySelector('svg');

                    fetch('{{ route('admin.internal.products.store') }}', {
                            /* ... POST config ... */
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': csrfToken
                            },
                            body: JSON.stringify(productData)
                        })
                        .then(response => response.ok ? response.json() : response.json().then(err => {
                            throw err;
                        })) // Basic error check
                        .then(data => {
                            /* ... Success UI update ... */
                            cardElement.classList.remove('ring-indigo-300');
                            cardElement.classList.add('ring-green-500');
                            if (svgIcon) {
                                svgIcon.innerHTML =
                                    '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />';
                            } // Checkmark
                            buttonElement.classList.remove('processing', 'text-green-600');
                            buttonElement.classList.add('text-green-600',
                                'cursor-default'); // Keep green
                            buttonElement.title = 'Product Added!';
                            setTimeout(() => {
                                cardElement.classList.remove('ring-2', 'ring-green-500',
                                    'ring-offset-2');
                            }, 2500);
                        })
                        .catch(error => {
                            /* ... Error UI update ... */
                            console.error('Failed to add product:', error);
                            cardElement.classList.remove('ring-indigo-300');
                            cardElement.classList.add('ring-red-500');
                            if (svgIcon) {
                                svgIcon.innerHTML =
                                    '<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />';
                            } // Plus icon
                            buttonElement.classList.remove('processing', 'opacity-50',
                                'cursor-not-allowed');
                            buttonElement.classList.add('text-red-600');
                            buttonElement.title = `Failed: ${error?.message || 'Unknown error'}`;
                            buttonElement.disabled = false;
                            setTimeout(() => {
                                cardElement.classList.remove('ring-2', 'ring-red-500',
                                    'ring-offset-2');
                                if (buttonElement) {
                                    buttonElement.classList.remove('text-red-600');
                                    buttonElement.classList.add('text-green-600');
                                    buttonElement.title =
                                        `Add ${escapeHtml(buttonElement.dataset.name || 'product')} to DB`;
                                }
                            }, 3000);
                        });
                }
            }); // end event listener

        }); // End of DOMContentLoaded
    </script>
@endpush