@extends('layouts.main')
@section('content')
<div class="container mx-auto pt-6">
    <h1 class="text-2xl font-bold mb-6">Product Selector</h1>
    <div class="flex flex-col lg:flex-col justify-between gap-y-6 lg:gap-y-0">

        <div class="flex">
            <form id="filterForm" method="GET">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    
                    <div class="flex flex-col">
                        <label for="category_id" class="font-medium mb-2">Search by category_id(s):</label>
                        <input type="text" name="category_id" id="category_id" placeholder="Enter comma-separated category_ids"
                            class="w-64 border rounded-md p-2" value="{{ request('category_id') }}">
                    </div>
                    <!-- Metal Quality Dropdown -->
                    <div class="flex-row">
                        <label for="metal_quality" class="block mb-2 font-medium">Select Metal Quality:</label>
                        <select name="metal_quality" id="metal_quality" class="w-64 border rounded-md p-2 mb-4">
                            <option value="">Choose Metal Quality</option>
                            @foreach ($allMetalQualities as $metal)
                            <option value="{{ $metal['Name'] }}"
                                {{ ($selectedMetalQuality ?? '') == $metal['Name'] ? 'selected' : '' }}>
                                {{ $metal['Name'] }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex-row">
                        <label for="product_type" class="block mb-2 font-medium">Select Product Type:</label>
                        <select name="product_type" id="product_type" class="w-64 border rounded-md p-2 mb-4">
                            <option value="">Choose Product Type</option>
                            @foreach ($ProductType as $ptype)
                            <option value="{{ $ptype['Name'] }}"
                                {{ ($selectedProductType ?? '') == $ptype['Name'] ? 'selected' : '' }}>
                                {{ $ptype['Name'] }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                   <div class="flex-row">
                        <label for="instock" class="block mb-2 font-medium">In Stock:</label>
                        <select name="instock" id="instock" class="w-64 border rounded-md p-2 mb-4">
                            <option value="">Select option</option>
                            @foreach ($instockOptions as $option)
                            <option value="{{ $option['Value'] }}"
                                {{ ($selectedInstock ?? '') == $option['Value'] ? 'selected' : '' }}>
                                {{ $option['Name'] }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex-row">
                        <label for="BestSeller" class="block mb-2 font-medium">BestSeller:</label>
                        <select name="BestSeller" id="BestSeller" class="w-64 border rounded-md p-2 mb-4">
                            <option value="">Select option</option>
                            @foreach ($BestSellerOptions as $option)
                            <option value="{{ $option['Value'] }}"
                                {{ ($BestSellerInstock ?? '') == $option['Value'] ? 'selected' : '' }}>
                                {{ $option['Name'] }}
                            </option>
                            @endforeach
                        </select>
                    </div>

<div class="flex-row">
    <label for="Orderable" class="block mb-2 font-medium">select option Orderable:</label>
    <select name="Orderable" id="Orderable" class="w-64 border rounded-md p-2 mb-4">
        <option value="">Select option</option>
        @foreach ($OrderableOptions as $option)
            <option value="{{ $option['Value'] }}"
                {{ $selectedOrderable == $option['Value'] ? 'selected' : '' }}>
                {{ $option['Name'] }}
            </option>
        @endforeach
    </select>
</div>
<div class="flex-row">
    <label for="Finished" class="block mb-2 font-medium">select option Finished:</label>
    <select name="Finished" id="Finished" class="w-64 border rounded-md p-2 mb-4">
        <option value="">Select option</option>
        @foreach ($FinishedOptions as $option)
            <option value="{{ $option['Value'] }}"
                {{ $selectedFinished == $option['Value'] ? 'selected' : '' }}>
                {{ $option['Name'] }}
            </option>
        @endforeach
    </select>
</div>
<div class="flex-row">
    <label for="OnPriceList" class="block mb-2 font-medium">select option OnPriceList:</label>
    <select name="OnPriceList" id="OnPriceList" class="w-64 border rounded-md p-2 mb-4">
        <option value="">Select option</option>
        @foreach ($OnPriceListOptions as $option)
            <option value="{{ $option['Value'] }}"
                {{ $selectedOnPriceList == $option['Value'] ? 'selected' : '' }}>
                {{ $option['Name'] }}
            </option>
        @endforeach
    </select>
</div>

                    <div class="mt-auto flex  items-center py-4">
                        <button type="submit" id="fetchButton"
                            class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                            Fetch Products
                        </button>
                        <div id="centerSpinner"
                            class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 hidden z-50">
                            <div class="p-4 bg-white rounded">
                                <svg class="animate-spin h-12 w-12 text-blue-600" xmlns="http://www.w3.org/2000/svg"
                                    fill="none" viewBox="0 0 34 34">
                                    <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>
                            </div>
                        </div>

                    </div>
                </div>
            </form>
        </div>
        <div class="flex">
            <form id="filterForm" method="GET" class="w-full">
                <div class="flex flex-col lg:flex-row lg:gap-4 items-start lg:items-end">

                    <!-- SKU Search -->
                    <div class="flex flex-col">
                        <label for="sku_search" class="font-medium mb-2">Search by SKU(s):</label>
                        <input type="text" name="sku_search" id="sku_search" placeholder="Enter comma-separated SKUs"
                            class="w-64 border rounded-md p-2" value="{{ request('sku_search') }}">
                    </div>

                    <!-- Submit Button aligned to bottom -->
                    <div class="flex flex-col">
                        <label class="invisible mb-2">Submit</label> <!-- Makes input heights consistent -->
                        <button type="submit" id="fetchButton"
                            class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                            Fetch Products
                        </button>

                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class=" items-center pb-24 container mx-auto px-6">
    <div id="productResults" >
        <!-- Products will be loaded here via AJAX -->
        @include('products.product_table', ['products' => $products])
    </div>
</div>
<div id="paginationWrapper"
    class="hidden sticky bottom-0 left-0 w-full bg-white shadow-md py-3 flex justify-center items-center gap-2 z-50 border-t">
</div>
<!-- Modal - Moved outside the table -->
<div id="productModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden  h-full w-full">
    <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-4xl shadow-lg rounded-md bg-white">
        <div class="mb-6">
            <div class="flex items-center justify-between">
                <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                    Product Details
                </h3>
                <button id="closeModal" type="button"
                    class="text-gray-500 hover:text-red-600 text-4xl font-bold focus:outline-none">
                    &times;
                </button>
            </div>

            <div class="mt-2" id="modal-content">
                <!-- Product details will be inserted here -->
            </div>
        </div>
    </div>

</div>
<div id="toast-container" class="fixed top-4 right-4 z-50 space-y-2"></div>

@endsection

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

document.addEventListener('DOMContentLoaded', function() {
    initializeModal();
    // initializeSSyncForm();
    initializeCheckboxHandlers();

    let paginationTokens = [{
        page: 1,
        token: null
    }];
    let currentPageIndex = 0;
    let currentNextPageToken = null;

    function renderPagination() {
        const wrapper = $('#paginationWrapper');
        wrapper.empty();

        // Prev Button
        if (currentPageIndex > 0) {
            wrapper.append(
                `<button class="page-btn px-3 py-1 bg-gray-300 rounded" data-index="${currentPageIndex - 1}">Prev</button>`
            );
        }

        // Page Numbers
        paginationTokens.forEach((entry, index) => {
            wrapper.append(
                `<button class="page-btn px-3 py-1 rounded ${index === currentPageIndex ? 'bg-blue-600 text-white' : 'bg-gray-200'}" data-index="${index}">${entry.page}</button>`
            );
        });

        // Next Button
        if (paginationTokens[currentPageIndex + 1] || currentNextPageToken) {
            wrapper.append(
                `<button class="page-btn px-3 py-1 bg-gray-300 rounded" data-index="${currentPageIndex + 1}">Next</button>`
            );
        }
    }

    function fetchPage(index) {
        const token = paginationTokens[index]?.token ?? null;
        const formData = $('#filterForm').serialize();
        const data = token ? formData + '&next_page_token=' + encodeURIComponent(token) : formData;
           console.log('Sending filter data:', formData);
        $('#centerSpinner').removeClass('hidden');
        $('#fetchButton').prop('disabled', true);

        $.ajax({
            url: "{{ route('products.index') }}",
            type: "GET",
            data: data,
            success: function(response) {
                $('#productResults').html(response.html);
                $('#totalProductsCount').text(response.totalProducts ?? '-');
                initializeCheckboxHandlers();

                currentPageIndex = index;
                currentNextPageToken = response.nextPageToken;

                // Only show pagination if modal is not open
                const modal = document.getElementById('productModal');
                if (!modal || modal.classList.contains('hidden')) {
                    if (response.html.trim() !== '' || currentNextPageToken) {
                        $('#paginationWrapper').removeClass('hidden');
                    }
                }

                if (!paginationTokens[currentPageIndex + 1] && response.nextPageToken) {
                    paginationTokens.push({
                        page: currentPageIndex + 2,
                        token: response.nextPageToken
                    });
                }

                renderPagination();
            },
            error: function(xhr) {
                console.error('AJAX Error:', xhr.responseText);
            },
            complete: function() {
                $('#centerSpinner').addClass('hidden');
                $('#fetchButton').prop('disabled', false);
            }
        });
    }

    // Initial form submission
    $('#filterForm').on('submit', function(e) {
        e.preventDefault();
        paginationTokens = [{
            page: 1,
            token: null
        }];
        currentPageIndex = 0;
        fetchPage(0);
    });

    // Pagination button click
    $(document).on('click', '.page-btn', function() {
        const index = parseInt($(this).data('index'));
        fetchPage(index);
    });



});

function initializeModal() {
    const modal = document.getElementById('productModal');
    const closeModal = document.getElementById('closeModal');
    const paginationWrapper = document.getElementById('paginationWrapper');

    let wasPaginationVisible = false;

    window.openModal = function(product) {
        // Store current pagination visibility state
        wasPaginationVisible = !paginationWrapper.classList.contains('hidden');

        // Hide pagination when modal opens
        if (paginationWrapper) {
            paginationWrapper.classList.add('hidden');
        }
        const modalContent = document.getElementById('modal-content');
        const price = product.Price ? '$' + product.Price.Value.toFixed(2) : '-';

        // Format weight
        const weight = product.GramWeight ? `${product.GramWeight}g (${product.Weight}dwt)` : '-';

        // Format descriptive elements
        const descriptiveElements = product.DescriptiveElementGroup?.DescriptiveElements || [];
        const descriptionHtml = descriptiveElements.map(el => `
            <div class="grid grid-cols-2 gap-2 py-1 border-b">
                <span class="font-medium">${el.Name}:</span>
                <span>${el.DisplayValue || el.Value || 'N/A'}</span>
            </div>
        `).join('');

        // Format specifications
        const specificationsHtml = product.Specifications?.map(spec => `
            <div class="grid grid-cols-2 gap-2 py-1 border-b">
                <span class="font-medium">${spec.Name}:</span>
                <span>${spec.Value || 'N/A'}</span>
            </div>
        `).join('') || '<p>No specifications available</p>';

        // Format web categories
        const categoriesHtml = product.WebCategories?.map(cat => `
            <div class="flex items-center gap-2 py-1 border-b">
                <img src="${cat.CategoryImageUrl || 'https://via.placeholder.com/80'}" 
                     alt="${cat.Name}" 
                     class="w-10 h-10 object-cover rounded">
                <span>${cat.Name}</span>
            </div>
        `).join('') || 'N/A';

        // Format all images (main + additional)
        const allImages = [...(product.GroupImages || []), ...(product.Images || [])];
        const imagesHtml = allImages.map((img, index) => `
            <div class="flex flex-col items-center gap-2 mb-4">
                <img src="${img.FullUrl || img.ThumbnailUrl || 'https://via.placeholder.com/500'}" 
                     alt="Product image ${index + 1}" 
                     class="w-full h-48 object-contain cursor-pointer hover:shadow-lg transition-all"
                     onclick="window.open('${img.ZoomUrl || img.FullUrl || ''}', '_blank')">
                ${img.Angle ? `<span class="text-sm text-gray-500">View: ${img.Angle}</span>` : ''}
            </div>
        `).join('') || '<p>No images available</p>';

        // Format engraving options if they exist
        let engravingHtml = '<p>No engraving options available</p>';
        if (product.ConfigurationModel?.EngravingOptions?.length) {
            engravingHtml = product.ConfigurationModel.EngravingOptions.map(opt => `
                <div class="mb-4 p-3 bg-gray-50 rounded-lg">
                    <h4 class="font-bold mb-2">${opt.Description}</h4>
                    ${opt.Types.map(type => `
                        <div class="ml-4 mb-3">
                            <h5 class="font-medium">${type.Name}</h5>
                            <p class="text-sm text-gray-600 mb-2">${type.Description}</p>
                            <p class="text-sm">Labor: $${type.Labor?.Value || '0'}</p>
                            
                            <h6 class="font-medium mt-2">Fonts:</h6>
                            <div class="grid grid-cols-2 gap-2">
                                ${type.Fonts.map(font => `
                                    <div class="p-2 border rounded">
                                        <p class="font-medium">${font.Name}</p>
                                        ${font.SampleImage && !font.SampleImage.includes('no image') ? 
                                            `<img src="${font.SampleImage}" alt="${font.Name}" class="w-full h-12 object-contain">` : 
                                            '<p class="text-sm text-gray-500">No sample available</p>'}
                                    </div>
                                `).join('')}
                            </div>
                            
                            <h6 class="font-medium mt-2">Fill Options:</h6>
                            <div class="flex flex-wrap gap-2">
                                ${type.FillOptions.map(fill => `
                                    <div class="p-2 border rounded">
                                        <p class="font-medium">${fill.Name}</p>
                                        <p class="text-sm">${fill.Description}</p>
                                        <div class="flex flex-wrap gap-1 mt-1">
                                            ${fill.Colors.map(color => `
                                                <span class="px-2 py-1 text-xs rounded 
                                                    ${color.Code.includes('BLACK') ? 'bg-black text-white' : 
                                                      color.Code.includes('BLUE') ? 'bg-blue-500 text-white' : 
                                                      color.Code.includes('RED') ? 'bg-red-500 text-white' : 
                                                      color.Code.includes('GREEN') ? 'bg-green-500 text-white' : 
                                                      color.Code.includes('PINK') ? 'bg-pink-500 text-white' : 
                                                      color.Code.includes('BROWN') ? 'bg-amber-700 text-white' : 
                                                      'bg-gray-200'}">
                                                    ${color.Name}
                                                </span>
                                            `).join('')}
                                        </div>
                                    </div>
                                `).join('')}
                            </div>
                        </div>
                    `).join('')}
                </div>
            `).join('');
        }

        let settingOptionsHtml = '<p>No setting options available</p>';

        if (product.ConfigurationModel?.RingSizeOptions?.length) {
            settingOptionsHtml = `
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            ${product.ConfigurationModel.RingSizeOptions.map(opt => `
                <div class="p-4 bg-gray-50 rounded-lg border border-gray-200 shadow-sm">
                    <div class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm">
                        <span class="font-semibold text-gray-700">Size (mm):</span>
                        <span class="text-gray-900">${opt.Size || 'N/A'}</span>

                        <span class="font-semibold text-gray-700">Is Stocked Size:</span>
                        <span class="text-gray-900">${opt.IsStockedSize ? 'Yes' : 'No'}</span>

                        <span class="font-semibold text-gray-700">Price:</span>
                        <span class="text-gray-900">${opt.Price?.Value || 'N/A'}</span>

                        <span class="font-semibold text-gray-700">Currency Code:</span>
                        <span class="text-gray-900">${opt.Price?.CurrencyCode || 'N/A'}</span>
                    </div>
                </div>
            `).join('')}
        </div>
    `;
        }

        modalContent.innerHTML = `
<div class="grid grid-cols-1 lg:grid-cols-4 mb-6 gap-6 h-[calc(100vh-150px)] overflow-y-auto">

                <!-- Left Column - All Images -->
                <div class="lg:col-span-1">
                    <!-- Main Image -->
                    <div class="bg-white rounded-lg shadow p-4 mb-4">
                        <h3 class="font-bold text-lg mb-2">Main Image</h3>
                        <img src="${allImages[0]?.FullUrl || allImages[0]?.ThumbnailUrl || 'https://via.placeholder.com/500'}" 
                             alt="Main product image" 
                             class="w-full h-64 object-contain cursor-pointer hover:shadow-lg transition-all"
                             onclick="window.open('${allImages[0]?.ZoomUrl || allImages[0]?.FullUrl || ''}', '_blank')">
                    </div>
                    
                    <!-- All Additional Images -->
                    <div class="bg-white rounded-lg shadow p-4 mb-4">
                        <h3 class="font-bold text-lg mb-2">Additional Images (${allImages.length - 1})</h3>
                        <div class="grid grid-cols-2 gap-4">
                            ${allImages.slice(1).map((img, index) => `
                                <div class="flex flex-col items-center gap-2">
                                    <img src="${img.FullUrl || img.ThumbnailUrl || 'https://via.placeholder.com/300'}" 
                                         alt="Product image ${index + 2}" 
                                         class="w-full h-32 object-contain cursor-pointer hover:shadow-md transition-all"
                                         onclick="window.open('${img.ZoomUrl || img.FullUrl || ''}', '_blank')">
                                    ${img.Angle ? `<span class="text-xs text-gray-500">${img.Angle}</span>` : ''}
                                </div>
                            `).join('')}
                        </div>
                    </div>
                    
                    <!-- Stone Map -->
                    ${product.StoneMapImage ? `
                        <div class="bg-white rounded-lg shadow p-4 mb-4">
                            <h3 class="font-bold text-lg mb-2">Stone Map</h3>
                            <img src="${product.StoneMapImage}" 
                                 alt="Stone map" 
                                 class="w-full h-48 object-contain">
                        </div>
                    ` : ''}
                    
                    <!-- Videos -->
                    ${product.Videos?.length ? `
                        <div class="bg-white rounded-lg shadow p-4">
                            <h3 class="font-bold text-lg mb-2">Videos</h3>
                            ${product.Videos.map(video => `
                                <div class="mb-2">
                                    <a href="${video.Url}" target="_blank" class="text-blue-600 hover:underline">
                                        View Product Video
                                    </a>
                                </div>
                            `).join('')}
                        </div>
                    ` : ''}
                </div>
                
                <!-- Right Column - Product Details -->
                <div class="lg:col-span-3">
                    <!-- Product Header -->
                    <div class="bg-white rounded-lg shadow p-4 mb-4">
                        <h2 class="text-2xl font-bold mb-2">${product.Description || 'Product Details'}</h2>
                        <p class="text-gray-600 mb-4">${product.ShortDescription || ''}</p>
                        <p class="text-blue-600 font-medium">Collection: ${product.Collection || 'N/A'}</p>
                        
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
                            <div class="bg-gray-50 p-3 rounded">
                                <h3 class="font-bold text-lg text-blue-600">${price}</h3>
                                <p class="text-sm">Price</p>
                            </div>
                            <div class="bg-gray-50 p-3 rounded">
                                <h3 class="font-bold text-lg">${product.Status || 'N/A'}</h3>
                                <p class="text-sm">Status</p>
                            </div>
                            <div class="bg-gray-50 p-3 rounded">
                                <h3 class="font-bold text-lg">${weight}</h3>
                                <p class="text-sm">Weight</p>
                            </div>
                            <div class="bg-gray-50 p-3 rounded">
                                <h3 class="font-bold text-lg">${product.LeadTime || 'N/A'} days</h3>
                                <p class="text-sm">Lead Time</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Product Specifications -->
                    <div class="bg-white rounded-lg shadow p-4 mb-4">
                        <h3 class="font-bold text-lg mb-2">Product Specifications</h3>
                        <div class="bg-gray-50 p-3 rounded">
                            <div class="grid grid-cols-2 gap-2">
                                <span class="font-medium">ID:</span>
                                <span>${product.Id || '-'}</span>
                                <span class="font-medium">SKU:</span>
                                <span>${product.SKU || '-'}</span>
                                <span class="font-medium">Merchandising:</span>
                                <span>${[product.MerchandisingCategory1, product.MerchandisingCategory2, product.MerchandisingCategory3].filter(Boolean).join(' > ')}</span>
                                <span class="font-medium">Country of Origin:</span>
                                <span>${product.CountryOfOrigin || 'N/A'}</span>
                                <span class="font-medium">Harmonized Code:</span>
                                <span>${product.HarmonizedCode || 'N/A'}</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Detailed Specifications -->
                    <div class="bg-white rounded-lg shadow p-4 mb-4">
                        <h3 class="font-bold text-lg mb-2">Detailed Specifications</h3>
                        <div class="bg-gray-50 p-3 rounded">
                            ${specificationsHtml}
                        </div>
                    </div>
                    
                    <!-- Descriptive Elements -->
                    <div class="bg-white rounded-lg shadow p-4 mb-4">
                        <h3 class="font-bold text-lg mb-2">Descriptive Elements</h3>
                        <div class="bg-gray-50 p-3 rounded">
                            ${descriptionHtml}
                        </div>
                    </div>
                    
                    <!-- Setting Options -->
                    <div class="bg-white rounded-lg shadow p-4 mb-4">
                        <h3 class="font-bold text-lg mb-2">Setting Options</h3>
                        ${settingOptionsHtml}
                    </div>
                    
                    <!-- Engraving Options -->
                    <div class="bg-white rounded-lg shadow p-4 mb-4">
                        <h3 class="font-bold text-lg mb-2">Engraving Options</h3>
                        ${engravingHtml}
                    </div>
                    
                    <!-- Categories -->
                    <div class="bg-white rounded-lg shadow p-4 mb-4">
                        <h3 class="font-bold text-lg mb-2">Web Categories</h3>
                        <div class="max-h-64 overflow-y-auto">
                            ${categoriesHtml}
                        </div>
                    </div>
                    
                    <!-- Matching Band -->
                    ${product.MatchingBand ? `
                        <div class="bg-white rounded-lg shadow p-4 mb-4">
                            <h3 class="font-bold text-lg mb-2">Matching Band</h3>
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <p class="font-medium">ID: ${product.MatchingBand.Id || '-'}</p>
                                    <p class="font-medium">SKU: ${product.MatchingBand.SKU || '-'}</p>
                                    <p>${product.MatchingBand.Description || ''}</p>
                                    <p class="text-blue-600 font-bold">$${product.MatchingBand.Price?.Value?.toFixed(2) || '0.00'}</p>
                                </div>
                                <div>
                                    <img src="${product.MatchingBand.Images?.[0]?.FullUrl || product.MatchingBand.Images?.[0]?.ThumbnailUrl || 'https://via.placeholder.com/150'}" 
                                         alt="Matching band" 
                                         class="w-full h-32 object-contain">
                                </div>
                            </div>
                        </div>
                    ` : ''}
                    
                </div>
            </div>
            </div>
        `;
        modal.classList.remove('hidden');
    };

    const closeModalHandler = () => {
        modal.classList.add('hidden');
        // Restore pagination visibility to its previous state
        if (paginationWrapper) {
            if (wasPaginationVisible) {
                paginationWrapper.classList.remove('hidden');
            } else {
                paginationWrapper.classList.add('hidden');
            }
        }
    };

    if (closeModal) {
        closeModal.addEventListener('click', closeModalHandler);
    }

    if (modal) {
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                closeModalHandler();
            }
        });
    }
}

function showToast(message, type = 'success') {
    const toastContainer = document.getElementById('toast-container');
    if (!toastContainer) return;

    const toast = document.createElement('div');
    toast.className = `
        px-4 py-2 rounded shadow text-white animate-fade-in
        ${type === 'success' ? 'bg-green-600' : 'bg-red-600'}
    `;
    toast.textContent = message;

    toastContainer.appendChild(toast);

    // Fade out and remove after 3 seconds
    setTimeout(() => {
        toast.classList.add('opacity-0');
        setTimeout(() => toast.remove(), 500);
    }, 3000);
}


function initializeCheckboxHandlers() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.product-checkbox:not(:disabled)');

    if (selectAll) {
        selectAll.addEventListener('change', function() {
            checkboxes.forEach(cb => {
                if (!cb.disabled) {
                    cb.checked = this.checked;
                    toggleRowHighlight(cb);
                }
            });

        });
    }

    checkboxes.forEach(cb => {
        cb.addEventListener('change', function() {
            toggleRowHighlight(this);
            updateSelectAllCheckbox();
        });
    });

    updateSelectAllCheckbox();
}

function toggleRowHighlight(checkbox) {
    const row = checkbox.closest('tr');
    if (checkbox.checked) {
        row.classList.add('bg-blue-50');
    } else {
        row.classList.remove('bg-blue-50');
    }
}

function updateSelectAllCheckbox() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.product-checkbox:not(:disabled)');

    if (!selectAll) return;

    const allChecked = Array.from(checkboxes).every(cb => cb.checked);
    const someChecked = Array.from(checkboxes).some(cb => cb.checked);

    selectAll.checked = allChecked;
    selectAll.indeterminate = someChecked && !allChecked;
}
</script>