@extends('layouts.admin')

@section('title', 'Products')


@php
    // Ensure visibleColumns is set with defaults
    if (!isset($visibleColumns) || empty($visibleColumns)) {
        $visibleColumns = ['image', 'name', 'category', 'tags', 'shipping_days', 'price', 'status', 'verified', 'actions'];
        if ($hasStock) {
            $visibleColumns = array_merge(
                array_slice($visibleColumns, 0, 4),
                ['stock'],
                array_slice($visibleColumns, 4)
            );
        }
    }
    
    // Helper function to check if column should be visible
    function isColumnVisible($column, $visibleColumns) {
        // Always show image and actions
        if ($column === 'image' || $column === 'actions') {
            return true;
        }
        return in_array($column, $visibleColumns);
    }
    
    // Helper function to generate sortable header link
    function sortableHeader($label, $sortField, $currentSort, $currentOrder) {
        $url = request()->fullUrlWithQuery([
            'sort' => $sortField,
            'order' => ($currentSort == $sortField && $currentOrder == 'asc') ? 'desc' : 'asc',
            'page' => 1
        ]);
        
        // Determine icon based on current sort state
        if ($currentSort == $sortField) {
            // Currently sorted by this field
            $icon = $currentOrder == 'asc' 
                ? '<i class="bi bi-arrow-up"></i>' 
                : '<i class="bi bi-arrow-down"></i>';
        } else {
            // Not currently sorted - show neutral icon
            $icon = '<i class="bi bi-arrow-down-up" style="opacity: 0.5;"></i>';
        }
        
        return [
            'url' => $url,
            'label' => $label,
            'icon' => $icon,
            'isActive' => $currentSort == $sortField
        ];
    }
    
    $currentSort = request('sort', 'created_at');
    $currentOrder = request('order', 'desc');
@endphp

@section('content')
@php
    $isVariantTab = isset($productType) && $productType === 'variant';
    $isSingleTab = !$isVariantTab;
@endphp
<div class="products-index-page tw-migrated space-y-4">
    @include('admin.partials.warehouse-catalogue-banner')
    <div class="tw-page-header">
        <div class="min-w-0 flex-1">
            <div class="products-eyebrow">Catalogue</div>
            <h1 class="tw-page-title tracking-tight">Products</h1>
        </div>
        <div class="tw-page-header__actions flex flex-wrap items-center gap-2 w-full sm:w-auto">
            <button type="button" class="tw-btn-outline tw-btn-sm" id="columnChooserBtn" title="Column Visibility" data-bs-toggle="modal" data-bs-target="#columnChooserModal">
                <i class="bi bi-columns-gap"></i> Columns
            </button>
            @can('products.create')
            @if($adminCatalogueWritable ?? false)
            <a href="{{ route('admin.products.import.show') }}" class="tw-btn-outline tw-btn-sm">
                <i class="bi bi-upload"></i> Import
            </a>
            @endif
            @endcan
            @can('products.create')
            @if($adminCatalogueWritable ?? false)
            @if($isSingleTab)
                <a href="{{ route('admin.products.create') }}" class="tw-btn-primary tw-btn-sm">
                    <i class="bi bi-plus-lg"></i> Add single product
                </a>
            @else
                <a href="{{ route('admin.products.variant.create') }}" class="tw-btn-primary tw-btn-sm">
                    <i class="bi bi-plus-lg"></i> Add variant product
                </a>
            @endif
            @endif
            @endcan
        </div>
    </div>

    <div class="grid gap-2 grid-cols-2 md:grid-cols-4">
        <x-ui.stat-card compact tone="primary" label="Products" :value="number_format($activeProductCount ?? 0)" :hint="number_format($totalProducts ?? 0).' total'" icon="bi bi-gem" />
        <x-ui.stat-card compact tone="info" label="Variants" :value="number_format($totalVariantChildren ?? 0)" :hint="number_format($variantCount ?? 0).' parents'" icon="bi bi-layers" />
        <x-ui.stat-card compact tone="warning" label="Stock value" :value="'₹'.number_format($approxStockValue ?? 0, 0)" :hint="($currentLocation?->name ?? null) ? 'At '.$currentLocation->name : 'Single products'" icon="bi bi-currency-rupee" />
        <x-ui.stat-card compact tone="danger" label="Low stock" :value="(string) ($lowStockCount ?? 0)" :hint="($currentLocation?->name ?? null) ? '≤ 10 at '.$currentLocation->name : '≤ 10 units'" icon="bi bi-exclamation-triangle" />
    </div>

    <!-- Product type pills -->
    <div class="products-type-pills" role="tablist">
        <a class="products-type-pill {{ $isSingleTab ? 'is-active' : '' }}"
           href="{{ route('admin.products.index', array_merge(request()->except(['type', 'page']), ['type' => 'single'])) }}">
            <i class="bi bi-box"></i> Single products
            <span class="products-type-pill__count">{{ $singleCount ?? 0 }}</span>
        </a>
        <a class="products-type-pill {{ $isVariantTab ? 'is-active' : '' }}"
           href="{{ route('admin.products.index', array_merge(request()->except(['type', 'page']), ['type' => 'variant'])) }}">
            <i class="bi bi-diagram-3"></i> Variant products
            <span class="products-type-pill__count">{{ $variantCount ?? 0 }}</span>
        </a>
    </div>

<!-- Search and Sort Section -->
<div class="tw-card products-filter-card">
    <div class="p-3 p-md-4">
        <form method="GET" action="{{ route('admin.products.index') }}" class="products-filter-fields">
            @if(isset($productType))
                <input type="hidden" name="type" value="{{ $productType }}">
            @endif
            @if(request('per_page'))
                <input type="hidden" name="per_page" value="{{ request('per_page') }}">
            @endif
            <div class="products-filter-field products-filter-field--search">
                <label class="admin-form-label">Search products</label>
                <div class="products-search-wrap">
                    <i class="bi bi-search"></i>
                    <input type="text"
                           name="search"
                           class="admin-form-control form-control"
                           placeholder="Name, tags, barcode, category…"
                           value="{{ request('search') }}">
                </div>
            </div>
            <div class="products-filter-field products-filter-field--category">
                <label class="admin-form-label">Category</label>
                <select name="category_id"
                        class="admin-form-control form-select"
                        onchange="this.form.submit()">
                    <option value="">All categories</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>
                            {{ $category->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="products-filter-field products-filter-field--status">
                <label class="admin-form-label">Status</label>
                <select name="status"
                        class="admin-form-control form-select"
                        onchange="this.form.submit()">
                    <option value="">All status</option>
                    <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                    <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                </select>
            </div>
            <div class="products-filter-field products-filter-field--verified">
                <label class="admin-form-label">Verified</label>
                <select name="verified"
                        class="admin-form-control form-select"
                        onchange="this.form.submit()">
                    <option value="">All</option>
                    <option value="verified" {{ request('verified') == 'verified' ? 'selected' : '' }}>Verified</option>
                    <option value="unverified" {{ request('verified') == 'unverified' ? 'selected' : '' }}>Not verified</option>
                </select>
            </div>
            <div class="products-filter-field products-filter-field--visibility">
                <label class="admin-form-label">Visibility</label>
                <select name="channel_visibility"
                        class="admin-form-control form-select"
                        onchange="this.form.submit()">
                    <option value="">All</option>
                    <option value="both" {{ request('channel_visibility') == 'both' ? 'selected' : '' }}>Both</option>
                    <option value="website_only" {{ request('channel_visibility') == 'website_only' ? 'selected' : '' }}>Website only</option>
                    <option value="pos_only" {{ request('channel_visibility') == 'pos_only' ? 'selected' : '' }}>POS only</option>
                </select>
            </div>
            <div class="products-filter-field products-filter-field--stock">
                <label class="admin-form-label">Stock</label>
                <select name="stock_filter"
                        class="admin-form-control form-select"
                        onchange="this.form.submit()">
                    <option value="">All</option>
                    <option value="low" {{ request('stock_filter') == 'low' ? 'selected' : '' }}>Low stock</option>
                </select>
            </div>
            <div class="products-filter-field products-filter-field--actions">
                <label class="admin-form-label">&nbsp;</label>
                <div class="d-flex gap-2">
                    <button type="submit" class="tw-btn-primary tw-btn-sm text-nowrap">
                        <i class="bi bi-search"></i> Search
                    </button>
                    @if(request('search') || request('category_id') || request('status') || request('verified') || request('channel_visibility') || request('stock_filter'))
                        <a href="{{ route('admin.products.index', isset($productType) ? ['type' => $productType] : []) }}" id="clearProductFiltersBtn" title="Clear filters" class="tw-btn-outline tw-btn-sm">
                           <i class="bi bi-arrow-clockwise"></i>
                        </a>
                    @endif
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Missing Categories Alert -->
@if(session('missing_categories') && is_array(session('missing_categories')))
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <div class="d-flex justify-content-between align-items-start">
            <div>
                <h5 class="alert-heading mb-2">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
                    Missing Categories Detected
                </h5>
                <p class="mb-2">The following categories were referenced in your import but don't exist:</p>
                <div class="missing-categories-list mb-3">
                    @foreach(array_slice(session('missing_categories'), 0, 30) as $categoryName)
                        <span class="badge bg-secondary me-1 mb-1">{{ $categoryName }}</span>
                    @endforeach
                    @if(count(session('missing_categories')) > 30)
                        <span class="text-muted">... and {{ count(session('missing_categories')) - 30 }} more</span>
                    @endif
                </div>
                <div class="d-flex gap-2 flex-wrap">
                    <a href="{{ route('admin.categories.index') }}" class="btn btn-sm btn-primary">
                        <i class="bi bi-tags"></i> Go to Categories
                    </a>
                    <a href="{{ route('admin.categories.create') }}" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-plus-circle"></i> Create Category
                    </a>
                </div>
            </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<div class="tw-card products-table-card overflow-hidden">
    <div class="p-0">
        <div class="table-responsive">
            <table class="admin-table table table-hover products-table mb-0">
                <thead>
                    <tr>
                        <th data-column="image">Image</th>
                        <th data-column="id" class="{{ !isColumnVisible('id', $visibleColumns) ? 'column-hidden' : '' }}">ID</th>
                        @php $nameSort = sortableHeader('Name', 'name', $currentSort, $currentOrder); @endphp
                        <th class="sortable-header {{ !isColumnVisible('name', $visibleColumns) ? 'column-hidden' : '' }}" data-column="name">
                            <a href="{{ $nameSort['url'] }}" class="sortable-link">
                                <span>{{ $nameSort['label'] }}</span>
                                <span class="sort-icon">{!! $nameSort['icon'] !!}</span>
                            </a>
                        </th>
                        <th data-column="sku" class="{{ !isColumnVisible('sku', $visibleColumns) ? 'column-hidden' : '' }}">Barcode</th>
                        @php $categorySort = sortableHeader('Category', 'category', $currentSort, $currentOrder); @endphp
                        <th class="sortable-header {{ !isColumnVisible('category', $visibleColumns) ? 'column-hidden' : '' }}" data-column="category">
                            <a href="{{ $categorySort['url'] }}" class="sortable-link">
                                <span>{{ $categorySort['label'] }}</span>
                                <span class="sort-icon">{!! $categorySort['icon'] !!}</span>
                            </a>
                        </th>
                        <th data-column="brand" class="{{ !isColumnVisible('brand', $visibleColumns) ? 'column-hidden' : '' }}">Brand</th>
                        <th data-column="hsn" class="{{ !isColumnVisible('hsn', $visibleColumns) ? 'column-hidden' : '' }}">HSN Code</th>
                        <th data-column="shipping_days" class="{{ !isColumnVisible('shipping_days', $visibleColumns) ? 'column-hidden' : '' }}">Shipping Days</th>
                        @php $priceSort = sortableHeader('Price', 'price', $currentSort, $currentOrder); @endphp
                        <th class="sortable-header {{ !isColumnVisible('price', $visibleColumns) ? 'column-hidden' : '' }}" data-column="price">
                            <a href="{{ $priceSort['url'] }}" class="sortable-link">
                                <span>{{ $priceSort['label'] }}</span>
                                <span class="sort-icon">{!! $priceSort['icon'] !!}</span>
                            </a>
                        </th>
                        <th data-column="mrp" class="{{ !isColumnVisible('mrp', $visibleColumns) ? 'column-hidden' : '' }}">MRP</th>
                        <th data-column="purchase_price" class="{{ !isColumnVisible('purchase_price', $visibleColumns) ? 'column-hidden' : '' }}">Purchase Price</th>
                        <th data-column="wholesale_price" class="{{ !isColumnVisible('wholesale_price', $visibleColumns) ? 'column-hidden' : '' }}">Wholesale Price</th>
                        @php $stockSort = sortableHeader('Stock', 'stock', $currentSort, $currentOrder); @endphp
                        <th class="sortable-header {{ !isColumnVisible('stock', $visibleColumns) ? 'column-hidden' : '' }}" data-column="stock">
                            <a href="{{ $stockSort['url'] }}" class="sortable-link">
                                <span>{{ $stockSort['label'] }}</span>
                                <span class="sort-icon">{!! $stockSort['icon'] !!}</span>
                            </a>
                        </th>
                        <th data-column="opening_stock" class="{{ !isColumnVisible('opening_stock', $visibleColumns) ? 'column-hidden' : '' }}">Opening Stock</th>
                        <th data-column="unit" class="{{ !isColumnVisible('unit', $visibleColumns) ? 'column-hidden' : '' }}">Unit</th>
                        <th data-column="tax" class="{{ !isColumnVisible('tax', $visibleColumns) ? 'column-hidden' : '' }}">Tax</th>
                        <th data-column="tags" class="{{ !isColumnVisible('tags', $visibleColumns) ? 'column-hidden' : '' }}">Tags</th>
                        <th data-column="short_desc" class="{{ !isColumnVisible('short_desc', $visibleColumns) ? 'column-hidden' : '' }}">Short Description</th>
                        @php $statusSort = sortableHeader('Status', 'status', $currentSort, $currentOrder); @endphp
                        <th class="sortable-header {{ !isColumnVisible('status', $visibleColumns) ? 'column-hidden' : '' }}" data-column="status">
                            <a href="{{ $statusSort['url'] }}" class="sortable-link">
                                <span>{{ $statusSort['label'] }}</span>
                                <span class="sort-icon">{!! $statusSort['icon'] !!}</span>
                            </a>
                        </th>
                        <th data-column="verified" class="{{ !isColumnVisible('verified', $visibleColumns) ? 'column-hidden' : '' }}">Verified</th>
                        <th data-column="channel_visibility" class="{{ !isColumnVisible('channel_visibility', $visibleColumns) ? 'column-hidden' : '' }}">Visibility</th>
                        <th data-column="featured" class="{{ !isColumnVisible('featured', $visibleColumns) ? 'column-hidden' : '' }}">Featured</th>
                        <th data-column="prebooking" class="{{ !isColumnVisible('prebooking', $visibleColumns) ? 'column-hidden' : '' }}">Prebooking</th>
                        <th data-column="created_at" class="{{ !isColumnVisible('created_at', $visibleColumns) ? 'column-hidden' : '' }}">Created At</th>
                        <th data-column="actions">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($products as $product)
                        <tr class="product-row" data-product-id="{{ $product->id }}">
                            <td data-column="image">
                                @if($product->image_path || $product->image)
                                    <x-product-image :product="$product" context="thumb" class="admin-image-preview" style="width: 50px; height: 50px; object-fit: cover; display: block; border-radius: 4px;" onerror="this.onerror=null; this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiBmaWxsPSIjZGVlMmU2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzZjNjU3OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';" />
                                @else
                                    <div class="bg-secondary rounded d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                        <i class="bi bi-image text-white" style="font-size: 0.875rem;"></i>
                                    </div>
                                @endif
                            </td>
                            <td data-column="id" class="{{ !isColumnVisible('id', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">#{{ $product->id }}</td>
                            <td data-column="name" class="{{ !isColumnVisible('name', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.9rem;">
                                @if(isset($productType) && $productType === 'variant' && $product->variants && $product->variants->count() > 0)
                                    <button type="button" class="btn btn-sm p-0 me-2 variant-toggle products-variant-toggle" data-product-id="{{ $product->id }}" title="Toggle variants">
                                        <i class="bi bi-chevron-right" id="toggle-icon-{{ $product->id }}"></i>
                                    </button>
                                @endif
                                {{ $product->name }}
                            </td>
                            <td data-column="sku" class="{{ !isColumnVisible('sku', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">{{ $product->barcode ?? $product->slug ?? 'N/A' }}</td>
                            <td data-column="category" class="{{ !isColumnVisible('category', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">{{ $product->category->name }}</td>
                            <td data-column="brand" class="{{ !isColumnVisible('brand', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">{{ $product->brand->name ?? 'N/A' }}</td>
                            <td data-column="hsn" class="{{ !isColumnVisible('hsn', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">{{ $product->hsn_code ?? 'N/A' }}</td>
                            <td data-column="shipping_days" class="{{ !isColumnVisible('shipping_days', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                @php($productShippingDays = $product->shipping_days ?? \App\Models\Setting::get('default_shipping_days'))
                                {{ !is_null($productShippingDays) && $productShippingDays !== '' ? $productShippingDays . ' day' . ((int) $productShippingDays === 1 ? '' : 's') : 'N/A' }}
                            </td>
                            <td data-column="price" class="{{ !isColumnVisible('price', $visibleColumns) ? 'column-hidden' : '' }}">
                                    <div class="products-price">
                                        ₹{{ number_format($product->price, 2) }}
                                    </div>
                            </td>
                            <td data-column="mrp" class="{{ !isColumnVisible('mrp', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                {{ $product->mrp ? '₹' . number_format($product->mrp, 2) : 'N/A' }}
                            </td>
                            <td data-column="purchase_price" class="{{ !isColumnVisible('purchase_price', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                {{ $product->purchase_price ? '₹' . number_format($product->purchase_price, 2) : 'N/A' }}
                            </td>
                            <td data-column="wholesale_price" class="{{ !isColumnVisible('wholesale_price', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                {{ $product->wholesale_price ? '₹' . number_format($product->wholesale_price, 2) : 'N/A' }}
                            </td>
                            <td data-column="stock" class="{{ !isColumnVisible('stock', $visibleColumns) ? 'column-hidden' : '' }}">
                                @if(isset($productType) && $productType === 'variant')
                                    <span class="products-stock-pill products-stock-pill--info">{{ $product->variants_count ?? 0 }} variants</span>
                                @else
                                    <span class="products-stock-pill {{ (int) ($product->location_stock ?? $product->current_stock ?? 0) <= 10 ? 'products-stock-pill--warn' : 'products-stock-pill--ok' }}"
                                          title="{{ (!empty($useLocationStock) && !empty($currentLocation)) ? ('Company total: '.(int) ($product->current_stock ?? 0)) : '' }}">
                                        {{ (int) ($product->location_stock ?? $product->current_stock ?? 0) }} in stock
                                    </span>
                                @endif
                            </td>
                            <td data-column="opening_stock" class="{{ !isColumnVisible('opening_stock', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">{{ $product->opening_stock ?? 0 }}</td>
                            <td data-column="unit" class="{{ !isColumnVisible('unit', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">{{ $product->unit->name ?? 'N/A' }}</td>
                            <td data-column="tax" class="{{ !isColumnVisible('tax', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">{{ $product->tax->name ?? 'N/A' }}</td>
                            <td data-column="tags" class="{{ !isColumnVisible('tags', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">{{ Str::limit($product->tags ?? 'N/A', 30) }}</td>
                            <td data-column="short_desc" class="{{ !isColumnVisible('short_desc', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">{{ Str::limit($product->short_desc ?? 'N/A', 40) }}</td>
                            <td data-column="status" class="{{ !isColumnVisible('status', $visibleColumns) ? 'column-hidden' : '' }}">
                                <span class="badge-modern {{ $product->is_active ? 'badge-modern-success' : 'badge-modern-danger' }}">
                                    {{ $product->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td data-column="verified" class="{{ !isColumnVisible('verified', $visibleColumns) ? 'column-hidden' : '' }}">
                                <span class="{{ $product->is_verified ? 'text-success' : 'text-danger' }}" title="{{ $product->is_verified ? 'Verified' : 'Not Verified' }}" style="display:inline-block;width:10px;height:10px;border-radius:50%;background:currentColor;"></span>
                            </td>
                            <td data-column="channel_visibility" class="{{ !isColumnVisible('channel_visibility', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                @if($product->channel_visibility === 'website_only')
                                    <span class="badge bg-primary">Only Website</span>
                                @elseif($product->channel_visibility === 'pos_only')
                                    <span class="badge bg-warning text-dark">Only POS</span>
                                @else
                                    <span class="badge bg-success">Both</span>
                                @endif
                            </td>
                            <td data-column="featured" class="{{ !isColumnVisible('featured', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                @if($product->is_featured)
                                    <span class="badge bg-success">Yes</span>
                                @else
                                    <span class="badge bg-secondary">No</span>
                                @endif
                            </td>
                            <td data-column="prebooking" class="{{ !isColumnVisible('prebooking', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                @if($product->is_prebooking)
                                    <span class="badge bg-info">Yes</span>
                                @else
                                    <span class="badge bg-secondary">No</span>
                                @endif
                            </td>
                            <td data-column="created_at" class="{{ !isColumnVisible('created_at', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">{{ $product->created_at->format('M d, Y') }}</td>
                            <td data-column="actions">
                                <div class="products-actions">
                                    <a href="{{ route('admin.products.barcode.print', $product->id) }}"
                                       class="products-action-btn products-action-btn--success"
                                       target="_blank"
                                       title="Print barcode">
                                        <i class="bi bi-upc-scan"></i>
                                    </a>
                                    @if(!isset($productType) || $productType === 'single')
                                    <a href="{{ route('admin.products.show', $product->id) }}"
                                       class="products-action-btn"
                                       title="View details">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    @endif
                                    @can('products.restock')
                                    @if($adminCatalogueWritable ?? false)
                                    @if(!isset($productType) || $productType === 'single')
                                        <a href="{{ route('admin.products.restock', ['product_id' => $product->id]) }}"
                                           class="products-action-btn products-action-btn--info"
                                           title="Add restock">
                                            <i class="bi bi-box-arrow-in-down"></i>
                                        </a>
                                    @endif
                                    @endif
                                    @endcan
                                    @if(isset($productType) && $productType === 'variant')
                                        <a href="{{ route('admin.products.variants.index', $product->id) }}"
                                           class="products-action-btn products-action-btn--primary"
                                           title="Manage variants">
                                            <i class="bi bi-layers"></i>
                                        </a>
                                    @endif
                                    @if(isset($productType) && $productType !== 'variant')
                                    <a href="{{ route('admin.products.stock-history', $product->id) }}"
                                       class="products-action-btn"
                                       title="Product history">
                                        <i class="bi bi-clock-history"></i>
                                    </a>
                                    @endif
                                    @can('products.update')
                                    @if($adminCatalogueWritable ?? false)
                                    @if(isset($productType) && $productType === 'variant')
                                        <a href="{{ route('admin.products.variant.edit', $product->id) }}"
                                           class="products-action-btn products-action-btn--primary"
                                           title="Edit">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                    @else
                                        <a href="{{ route('admin.products.edit', $product->id) }}"
                                           class="products-action-btn products-action-btn--primary"
                                           title="Edit">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                    @endif
                                    @endif
                                    @endcan
                                    @can('products.delete')
                                    @if($adminCatalogueWritable ?? false)
                                    <form action="{{ route('admin.products.destroy', $product->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                                class="products-action-btn products-action-btn--danger"
                                                title="Delete">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                    @endif
                                    @endcan
                                </div>
                            </td>
                        </tr>
                        @if(isset($productType) && $productType === 'variant' && $product->variants && $product->variants->count() > 0)
                            @foreach($product->variants as $variant)
                                <tr class="variant-row" data-parent-id="{{ $product->id }}" style="display: none;">
                                    <td data-column="image">
                                        @if($variant->image_path || $variant->image)
                                            <x-product-image :product="$variant" context="thumb" class="admin-image-preview" style="width: 50px; height: 50px; object-fit: cover; display: block; border-radius: 4px;" onerror="this.onerror=null; this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiBmaWxsPSIjZGVlMmU2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzZjNjU3OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';" />
                                        @else
                                            <div class="bg-secondary rounded d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                                <i class="bi bi-image text-white" style="font-size: 0.875rem;"></i>
                                            </div>
                                        @endif
                                    </td>
                                    <td data-column="id" class="{{ !isColumnVisible('id', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem; padding-left: 40px;">
                                        #{{ $variant->id }}
                                    </td>
                                    <td data-column="name" class="{{ !isColumnVisible('name', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.9rem; padding-left: 40px;">
                                        <span class="text-muted" style="font-size: 0.85rem;">└─</span> 
                                        {{ $variant->variation_name ?? $variant->name }}
                                        @if($variant->attributeValues && $variant->attributeValues->count() > 0)
                                            <small class="text-muted d-block mt-1">
                                                @foreach($variant->attributeValues as $attrValue)
                                                    <span class="badge bg-light text-dark me-1">{{ $attrValue->attribute->name }}: {{ $attrValue->value }}</span>
                                                @endforeach
                                            </small>
                                        @endif
                                    </td>
                                    <td data-column="sku" class="{{ !isColumnVisible('sku', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                        {{ $variant->barcode ?? $variant->slug ?? 'N/A' }}
                                    </td>
                                    <td data-column="category" class="{{ !isColumnVisible('category', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                        {{ $variant->category->name ?? $product->category->name ?? 'N/A' }}
                                    </td>
                                    <td data-column="brand" class="{{ !isColumnVisible('brand', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                        {{ $variant->brand->name ?? $product->brand->name ?? 'N/A' }}
                                    </td>
                                    <td data-column="hsn" class="{{ !isColumnVisible('hsn', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                        {{ $variant->hsn_code ?? $product->hsn_code ?? 'N/A' }}
                                    </td>
                                    <td data-column="shipping_days" class="{{ !isColumnVisible('shipping_days', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                        @php($variantShippingDays = $variant->shipping_days ?? $product->shipping_days ?? \App\Models\Setting::get('default_shipping_days'))
                                        {{ !is_null($variantShippingDays) && $variantShippingDays !== '' ? $variantShippingDays . ' day' . ((int) $variantShippingDays === 1 ? '' : 's') : 'N/A' }}
                                    </td>
                                    <td data-column="price" class="{{ !isColumnVisible('price', $visibleColumns) ? 'column-hidden' : '' }}">
                                        <div class="products-price">
                                            ₹{{ number_format($variant->price, 2) }}
                                        </div>
                                    </td>
                                    <td data-column="mrp" class="{{ !isColumnVisible('mrp', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                        {{ $variant->mrp ? '₹' . number_format($variant->mrp, 2) : 'N/A' }}
                                    </td>
                                    <td data-column="purchase_price" class="{{ !isColumnVisible('purchase_price', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                        {{ $variant->purchase_price ? '₹' . number_format($variant->purchase_price, 2) : 'N/A' }}
                                    </td>
                                    <td data-column="wholesale_price" class="{{ !isColumnVisible('wholesale_price', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                        {{ $variant->wholesale_price ? '₹' . number_format($variant->wholesale_price, 2) : 'N/A' }}
                                    </td>
                                    <td data-column="stock" class="{{ !isColumnVisible('stock', $visibleColumns) ? 'column-hidden' : '' }}">
                                        <div style="font-size: 0.9rem;">
                                            <strong>{{ (int) ($variant->location_stock ?? $variant->current_stock ?? 0) }}</strong>
                                        </div>
                                    </td>
                                    <td data-column="opening_stock" class="{{ !isColumnVisible('opening_stock', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                        {{ $variant->opening_stock ?? 0 }}
                                    </td>
                                    <td data-column="unit" class="{{ !isColumnVisible('unit', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                        {{ $variant->unit->name ?? $product->unit->name ?? 'N/A' }}
                                    </td>
                                    <td data-column="tax" class="{{ !isColumnVisible('tax', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                        {{ $variant->tax->name ?? $product->tax->name ?? 'N/A' }}
                                    </td>
                                    <td data-column="tags" class="{{ !isColumnVisible('tags', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                        {{ Str::limit($variant->tags ?? 'N/A', 30) }}
                                    </td>
                                    <td data-column="short_desc" class="{{ !isColumnVisible('short_desc', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                        {{ Str::limit($variant->short_desc ?? 'N/A', 40) }}
                                    </td>
                                    <td data-column="status" class="{{ !isColumnVisible('status', $visibleColumns) ? 'column-hidden' : '' }}">
                                        <span class="badge-modern {{ $variant->is_active ? 'badge-modern-success' : 'badge-modern-danger' }}">
                                            {{ $variant->is_active ? 'Active' : 'Inactive' }}
                                        </span>
                                    </td>
                                    <td data-column="verified" class="{{ !isColumnVisible('verified', $visibleColumns) ? 'column-hidden' : '' }}">
                                        <span class="{{ $variant->is_verified ? 'text-success' : 'text-danger' }}" title="{{ $variant->is_verified ? 'Verified' : 'Not Verified' }}" style="display:inline-block;width:10px;height:10px;border-radius:50%;background:currentColor;"></span>
                                    </td>
                                    <td data-column="channel_visibility" class="{{ !isColumnVisible('channel_visibility', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                        @if($variant->channel_visibility === 'website_only')
                                            <span class="badge bg-primary">Only Website</span>
                                        @elseif($variant->channel_visibility === 'pos_only')
                                            <span class="badge bg-warning text-dark">Only POS</span>
                                        @else
                                            <span class="badge bg-success">Both</span>
                                        @endif
                                    </td>
                                    <td data-column="featured" class="{{ !isColumnVisible('featured', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                        @if($variant->is_featured)
                                            <span class="badge bg-success">Yes</span>
                                        @else
                                            <span class="badge bg-secondary">No</span>
                                        @endif
                                    </td>
                                    <td data-column="prebooking" class="{{ !isColumnVisible('prebooking', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                        @if($variant->is_prebooking)
                                            <span class="badge bg-info">Yes</span>
                                        @else
                                            <span class="badge bg-secondary">No</span>
                                        @endif
                                    </td>
                                    <td data-column="created_at" class="{{ !isColumnVisible('created_at', $visibleColumns) ? 'column-hidden' : '' }}" style="font-size: 0.875rem;">
                                        {{ $variant->created_at->format('M d, Y') }}
                                    </td>
                                    <td data-column="actions">
                                        <div class="products-actions">
                                            <a href="{{ route('admin.products.barcode.print', $product->id) }}?variant_id={{ $variant->id }}"
                                               class="products-action-btn products-action-btn--success"
                                               target="_blank"
                                               title="Print barcode">
                                                <i class="bi bi-upc-scan"></i>
                                            </a>
                                            @can('products.restock')
                                            @if($adminCatalogueWritable ?? false)
                                            <button type="button"
                                                    class="products-action-btn products-action-btn--info"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#restockModal{{ $variant->id }}"
                                                    title="Add restock">
                                                <i class="bi bi-box-arrow-in-down"></i>
                                            </button>
                                            @endif
                                            @endcan
                                            <a href="{{ route('admin.products.variants.stock-history', $variant->id) }}"
                                                class="products-action-btn"
                                                title="Stock history">
                                                    <i class="bi bi-clock-history"></i>
                                            </a>
                                            @can('products.delete')
                                            @if($adminCatalogueWritable ?? false)
                                            <form action="{{ route('admin.products.variants.destroy', $variant->id) }}"
                                                method="POST"
                                                class="d-inline"
                                                onsubmit="return confirm('Are you sure you want to delete this variant?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit"
                                                        class="products-action-btn products-action-btn--danger"
                                                        title="Delete">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                            @endif
                                            @endcan
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @endif
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Pagination - Right Aligned -->
            <div class="pagination-wrapper d-flex justify-content-between mt-4 col-12">

            <div class="align-items-center gap-2">
                    <label for="productsPerPage" class="mb-0 small text-muted ">Per page</label>
                    <form method="GET" action="{{ route('admin.products.index') }}" class="d-inline">
                        @foreach(request()->except(['per_page', 'page']) as $key => $value)
                            @if(is_array($value))
                                @foreach($value as $item)
                                    <input type="hidden" name="{{ $key }}[]" value="{{ $item }}">
                                @endforeach
                            @else
                                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                            @endif
                        @endforeach
                        <select id="productsPerPage" name="per_page" class="form-select form-select-sm" style="width: auto;" onchange="this.form.submit()">
                            @foreach(($allowedPerPage ?? [10, 20, 50, 100]) as $size)
                                <option value="{{ $size }}" {{ (int)($perPage ?? request('per_page', 10)) === (int)$size ? 'selected' : '' }}>{{ $size }}</option>
                            @endforeach
                        </select>
                    </form>
                </div>
            <div class="d-flex justify-content-end align-items-center gap-3 flex-wrap">
                <div class="pagination-info-text">
                    Showing <strong>{{ $products->firstItem() ?? 0 }}</strong>–<strong>{{ $products->lastItem() ?? 0 }}</strong> 
                    of <strong>{{ $products->total() }}</strong> products
                </div>
                @if($products->hasPages())
                <div class="pagination-controls">
                    {{ $products->links('vendor.pagination.admin-categories') }}
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Duplicate Products Alert -->
@if(isset($duplicateProducts) && $duplicateProducts->count() > 0)
<div class="admin-card mt-4">
    <div class="card-body">
        <div class="alert alert-warning mb-0">
            <h5 class="alert-heading mb-2">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                Duplicate Products Detected
            </h5>
            <p class="mb-3">The following products have duplicate names within the same category:</p>
            <div class="table-responsive">
                <table class="table table-sm table-bordered">
                    <thead>
                        <tr>
                            <th>Product Name</th>
                            <th>Category</th>
                            <th>ID</th>
                            <th>Price</th>
                            <th>Stock</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($duplicateProducts as $product)
                            <tr>
                                <td>{{ $product->name }}</td>
                                <td>{{ $product->category->name ?? 'N/A' }}</td>
                                <td>#{{ $product->id }}</td>
                                <td>₹{{ number_format($product->price, 2) }}</td>
                                <td>{{ $product->current_stock }}</td>
                                <td>
                                    <div class="d-flex gap-1">
                                        @if($adminCatalogueWritable ?? false)
                                        <a href="{{ route('admin.products.edit', $product->id) }}" 
                                           class="btn btn-sm btn-primary"
                                           title="Edit">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        <form action="{{ route('admin.products.destroy', $product->id) }}" 
                                              method="POST" 
                                              class="d-inline" 
                                              onsubmit="return confirm('Delete this duplicate product?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" 
                                                    class="btn btn-sm btn-danger"
                                                    title="Delete">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <small class="text-muted mt-2 d-block">
                <i class="bi bi-info-circle"></i> 
                Consider merging or deleting duplicate products to maintain data integrity.
            </small>
        </div>
    </div>
</div>
@endif

<!-- Restock Modals for Variants -->
@if(isset($productType) && $productType === 'variant' && ($adminCatalogueWritable ?? false))
    @foreach($products as $product)
        @if($product->variants && $product->variants->count() > 0)
            @foreach($product->variants as $variant)
                <!-- Restock Modal for Variant {{ $variant->id }} -->
                <div class="modal fade mt-5" id="restockModal{{ $variant->id }}" tabindex="-1" aria-labelledby="restockModalLabel{{ $variant->id }}" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header products-modal-header">
                                <h5 class="modal-title" id="restockModalLabel{{ $variant->id }}">
                                    <i class="bi bi-box-arrow-in-down"></i> Restock Variant
                                </h5>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <form action="{{ route('admin.products.variants.restock', $variant->id) }}" method="POST">
                                @csrf
                                <input type="hidden" name="return_to_list" value="1">
                                @if(!empty($adminCentralWarehouseId))
                                    <input type="hidden" name="location_id" value="{{ $adminCentralWarehouseId }}">
                                @endif
                                @if(request('search'))
                                    <input type="hidden" name="search" value="{{ request('search') }}">
                                @endif
                                <div class="modal-body">
                                    <div class="mb-3">
                                        <label class="form-label"><strong>Variant:</strong></label>
                                        <p class="mb-0">{{ $variant->variation_name ?? $variant->name }}</p>
                                    </div>
                                    <div class="alert alert-info py-2">
                                        Stock is added to <strong>warehouse</strong> only. Transfer to stores afterwards.
                                    </div>
                                    @if($variant->attributeValues && $variant->attributeValues->count() > 0)
                                    <div class="mb-3">
                                        <label class="form-label"><strong>Attributes:</strong></label>
                                        <p class="mb-0">
                                            @foreach($variant->attributeValues as $attrValue)
                                                <span class="badge bg-secondary me-1">
                                                    {{ $attrValue->attribute->name }}: {{ $attrValue->value }}
                                                </span>
                                            @endforeach
                                        </p>
                                    </div>
                                    @endif
                                    <div class="mb-3">
                                        <label class="form-label"><strong>Barcode:</strong></label>
                                        <p class="mb-0">{{ $variant->barcode ?? 'N/A' }}</p>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label"><strong>Current Stock:</strong></label>
                                        <p class="mb-0"><strong>{{ (int) ($variant->location_stock ?? $variant->current_stock ?? 0) }}</strong></p>
                                    </div>
                                    <div class="mb-3">
                                        <label for="quantity{{ $variant->id }}" class="form-label">Quantity to Add *</label>
                                        <input type="number" 
                                                name="quantity" 
                                                id="quantity{{ $variant->id }}"
                                                class="form-control @error('quantity') is-invalid @enderror" 
                                                value="{{ old('quantity') }}" 
                                                required 
                                                min="1"
                                                placeholder="Enter quantity to add">
                                        @error('quantity')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="form-text text-muted">Enter the quantity to add to stock</small>
                                    </div>
                                    <div class="mb-3">
                                        <label for="notes{{ $variant->id }}" class="form-label">Notes (Optional)</label>
                                        <textarea name="notes" 
                                                    id="notes{{ $variant->id }}"
                                                    class="form-control @error('notes') is-invalid @enderror" 
                                                    rows="3"
                                                    placeholder="e.g., New shipment arrived, Returned items, etc.">{{ old('notes') }}</textarea>
                                        @error('notes')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="form-text text-muted">Add any notes about this restock</small>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-plus-circle"></i> Restock Variant
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            @endforeach
        @endif
    @endforeach
@endif

<!-- Column Chooser Modal -->
<div class="modal fade" id="columnChooserModal" tabindex="-1" aria-labelledby="columnChooserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header products-modal-header">
                <h5 class="modal-title text-white" id="columnChooserModalLabel">
                    <i class="bi bi-columns-gap me-2"></i>Column Visibility
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3 d-flex gap-2 flex-wrap">
                    <button type="button" class="btn btn-sm btn-outline-primary" id="selectAllColumns">
                        <i class="bi bi-check-all"></i> Select All
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="deselectAllColumns">
                        <i class="bi bi-x-square"></i> Deselect All
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-info" id="resetToDefault">
                        <i class="bi bi-arrow-counterclockwise"></i> Reset to Default
                    </button>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="mb-3 text-muted">Basic Information</h6>
                        <div class="column-list">
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-image" data-column="image" disabled checked>
                                <label class="form-check-label" for="col-image">
                                    Image <small class="text-muted">(Always visible)</small>
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-id" data-column="id">
                                <label class="form-check-label" for="col-id">ID</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-name" data-column="name" checked>
                                <label class="form-check-label" for="col-name">Name</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-sku" data-column="sku">
                                <label class="form-check-label" for="col-sku">Barcode</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-category" data-column="category" checked>
                                <label class="form-check-label" for="col-category">Category</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-brand" data-column="brand">
                                <label class="form-check-label" for="col-brand">Brand</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-hsn" data-column="hsn">
                                <label class="form-check-label" for="col-hsn">HSN Code</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-shipping-days" data-column="shipping_days">
                                <label class="form-check-label" for="col-shipping-days">Shipping Days</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6 class="mb-3 text-muted">Pricing & Stock</h6>
                        <div class="column-list">
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-price" data-column="price" checked>
                                <label class="form-check-label" for="col-price">Price</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-mrp" data-column="mrp">
                                <label class="form-check-label" for="col-mrp">MRP</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-purchase-price" data-column="purchase_price">
                                <label class="form-check-label" for="col-purchase-price">Purchase Price</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-wholesale-price" data-column="wholesale_price">
                                <label class="form-check-label" for="col-wholesale-price">Wholesale Price</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-stock" data-column="stock" checked>
                                <label class="form-check-label" for="col-stock">Current Stock</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-opening-stock" data-column="opening_stock">
                                <label class="form-check-label" for="col-opening-stock">Opening Stock</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-md-6">
                        <h6 class="mb-3 text-muted">Additional Information</h6>
                        <div class="column-list">
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-unit" data-column="unit">
                                <label class="form-check-label" for="col-unit">Unit</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-tax" data-column="tax">
                                <label class="form-check-label" for="col-tax">Tax</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-tags" data-column="tags">
                                <label class="form-check-label" for="col-tags">Tags</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-short-desc" data-column="short_desc">
                                <label class="form-check-label" for="col-short-desc">Short Description</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6 class="mb-3 text-muted">Status & Dates</h6>
                        <div class="column-list">
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-status" data-column="status" checked>
                                <label class="form-check-label" for="col-status">Status</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-verified" data-column="verified">
                                <label class="form-check-label" for="col-verified">Verified</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-channel-visibility" data-column="channel_visibility">
                                <label class="form-check-label" for="col-channel-visibility">Visibility</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-featured" data-column="featured">
                                <label class="form-check-label" for="col-featured">Featured</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-prebooking" data-column="prebooking">
                                <label class="form-check-label" for="col-prebooking">Prebooking</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-created-at" data-column="created_at">
                                <label class="form-check-label" for="col-created-at">Created At</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input column-checkbox" type="checkbox" id="col-actions" data-column="actions" disabled checked>
                                <label class="form-check-label" for="col-actions">
                                    Actions <small class="text-muted">(Always visible)</small>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="applyColumnChanges">
                    <i class="bi bi-check-lg"></i> Apply Changes
                </button>
            </div>
        </div>
    </div>
</div>

</div>{{-- .products-index-page --}}

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const FILTER_STORAGE_KEY_BASE = 'adminProductsFilters';
    const STORAGE_KEY_BASE = 'productColumnsVisibility';
    const SAVE_ENDPOINT = '{{ route("admin.products.column-preferences") }}';
    const perPageSelect = document.getElementById('productsPerPage');
    
    // Get elements
    const columnChooserModal = document.getElementById('columnChooserModal');
    const columnCheckboxes = document.querySelectorAll('.column-checkbox');
    const selectAllBtn = document.getElementById('selectAllColumns');
    const deselectAllBtn = document.getElementById('deselectAllColumns');
    const resetBtn = document.getElementById('resetToDefault');
    const applyBtn = document.getElementById('applyColumnChanges');
    
    // Get preferences from server (passed from controller)
    const serverVisibleColumns = @json($visibleColumns ?? []);
    const defaultVisible = @json($defaultVisible ?? []);
    const availableColumns = @json($availableColumns ?? []);
    const productType = '{{ isset($productType) ? $productType : "single" }}';
    const STORAGE_KEY = `${STORAGE_KEY_BASE}_${productType}`;
    const FILTER_STORAGE_KEY = `${FILTER_STORAGE_KEY_BASE}_${productType}`;
    
    // Get default visible columns based on product type
    function getDefaultVisible() {
        return defaultVisible.length > 0 ? defaultVisible : ['image', 'name', 'category', 'shipping_days', 'price', 'stock', 'status', 'verified', 'channel_visibility', 'actions'];
    }

    function getValidColumns(columns) {
        const validColumns = availableColumns.length > 0 ? availableColumns : getAllAvailableColumns();
        const filtered = (Array.isArray(columns) ? columns : []).filter(col => validColumns.includes(col));
        if (!filtered.includes('image')) filtered.push('image');
        if (!filtered.includes('actions')) filtered.push('actions');
        return filtered;
    }

    function getCurrentQueryString() {
        const params = new URLSearchParams(window.location.search);
        params.delete('_token');
        return params.toString();
    }

    function persistCurrentFilters() {
        const currentQuery = getCurrentQueryString();
        if (currentQuery) {
            localStorage.setItem(FILTER_STORAGE_KEY, currentQuery);
        }
    }

    function restoreFiltersIfNeeded() {
        const currentQuery = getCurrentQueryString();
        const savedQuery = localStorage.getItem(FILTER_STORAGE_KEY);

        if (!currentQuery && savedQuery) {
            const targetUrl = `${window.location.pathname}?${savedQuery}`;
            if (targetUrl !== window.location.href) {
                window.location.replace(targetUrl);
                return true;
            }
        }
        return false;
    }
    
    // Load saved preferences from localStorage first, then server, then defaults
    function loadColumnPreferences() {
        const saved = localStorage.getItem(STORAGE_KEY);
        if (saved) {
            try {
                const preferences = JSON.parse(saved);
                const filtered = getValidColumns(preferences);
                return filtered.length > 0 ? filtered : getDefaultVisible();
            } catch (e) {
                // Ignore malformed values and continue fallback chain.
            }
        }

        // Backward compatibility for old storage key (without product type suffix)
        const legacySaved = localStorage.getItem(STORAGE_KEY_BASE);
        if (legacySaved) {
            try {
                const legacyPreferences = JSON.parse(legacySaved);
                const legacyFiltered = getValidColumns(legacyPreferences);
                if (legacyFiltered.length > 0) {
                    localStorage.setItem(STORAGE_KEY, JSON.stringify(legacyFiltered));
                    return legacyFiltered;
                }
            } catch (e) {
                // Ignore malformed legacy values and continue fallback chain.
            }
        }

        if (serverVisibleColumns && serverVisibleColumns.length > 0) {
            const serverFiltered = getValidColumns(serverVisibleColumns);
            if (serverFiltered.length > 0) {
                localStorage.setItem(STORAGE_KEY, JSON.stringify(serverFiltered));
                return serverFiltered;
            }
        }

        return getValidColumns(getDefaultVisible());
    }
    
    // Get all available columns (fallback if not provided from server)
    function getAllAvailableColumns() {
        if (availableColumns && availableColumns.length > 0) {
            return availableColumns;
        }
        const columns = ['image', 'id', 'name', 'sku', 'category', 'brand', 'hsn', 'shipping_days', 'price', 'mrp', 'purchase_price', 'wholesale_price', 'status', 'verified', 'channel_visibility', 'actions'];
        columns.splice(columns.indexOf('price') + 1, 0, 'stock', 'opening_stock');
        columns.push('unit', 'tax', 'tags', 'short_desc', 'featured', 'prebooking', 'created_at');
        return columns;
    }
    
    // Save preferences to database via AJAX
    function saveColumnPreferences(visibleColumns) {
        // Save to localStorage as backup
        localStorage.setItem(STORAGE_KEY, JSON.stringify(visibleColumns));
        
        // Get CSRF token
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
        
        // Save to database via AJAX
        fetch(SAVE_ENDPOINT, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({
                columns: visibleColumns,
                product_type: productType
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                console.log('Column preferences saved to database');
            } else {
                console.warn('Failed to save preferences to database:', data.message);
            }
        })
        .catch(error => {
            console.error('Error saving preferences to database:', error);
            // Preferences already saved to localStorage as fallback
        });
    }
    
    // Apply column visibility (only to table cells, not modal elements)
    function applyColumnVisibility(visibleColumns) {
        // Only target table cells, exclude modal elements
        const allColumns = document.querySelectorAll('.admin-table [data-column]');
        allColumns.forEach(element => {
            // Skip if element is inside a modal
            if (element.closest('.modal')) {
                return;
            }
            const column = element.getAttribute('data-column');
            // Always show image and actions
            if (column === 'image' || column === 'actions') {
                element.classList.remove('column-hidden');
            } else if (visibleColumns.includes(column)) {
                element.classList.remove('column-hidden');
            } else {
                element.classList.add('column-hidden');
            }
        });
    }
    
    // Update checkboxes based on visible columns
    function updateCheckboxes(visibleColumns) {
        if (columnCheckboxes && columnCheckboxes.length > 0) {
            columnCheckboxes.forEach(checkbox => {
                const column = checkbox.getAttribute('data-column');
                checkbox.checked = visibleColumns.includes(column);
            });
        }
    }
    
    // Get currently visible columns from checkboxes
    function getVisibleColumnsFromCheckboxes() {
        const visible = [];
        columnCheckboxes.forEach(checkbox => {
            if (checkbox.checked) {
                visible.push(checkbox.getAttribute('data-column'));
            }
        });
        return visible;
    }
    
    // Store current visible columns
    let currentVisibleColumns = [];
    
    // Initialize column visibility
    function initializeColumns() {
        let visibleColumns = loadColumnPreferences();
        // Store current visible columns
        currentVisibleColumns = [...visibleColumns];
        applyColumnVisibility(visibleColumns);
        updateCheckboxes(visibleColumns);
    }
    
    // Update checkboxes when modal is shown
    if (columnChooserModal) {
        columnChooserModal.addEventListener('show.bs.modal', function() {
            // Use stored current visible columns (from initialization or last apply)
            if (currentVisibleColumns && currentVisibleColumns.length > 0) {
                updateCheckboxes(currentVisibleColumns);
            } else if (serverVisibleColumns && serverVisibleColumns.length > 0) {
                // Fallback to server-provided columns
                updateCheckboxes(serverVisibleColumns);
            } else {
                // Last resort: read from table DOM (excluding modal)
                const visibleColumns = [];
                document.querySelectorAll('.admin-table [data-column]').forEach(el => {
                    // Skip if element is inside a modal
                    if (el.closest('.modal')) {
                        return;
                    }
                    const col = el.getAttribute('data-column');
                    // Only count columns that don't have column-hidden class
                    if (!el.classList.contains('column-hidden') && !visibleColumns.includes(col)) {
                        visibleColumns.push(col);
                    }
                });
                updateCheckboxes(visibleColumns);
            }
        });
    }
    
    // Select All
    if (selectAllBtn) {
        selectAllBtn.addEventListener('click', function() {
            columnCheckboxes.forEach(checkbox => {
                if (!checkbox.disabled) {
                    checkbox.checked = true;
                }
            });
        });
    }
    
    // Deselect All
    if (deselectAllBtn) {
        deselectAllBtn.addEventListener('click', function() {
            columnCheckboxes.forEach(checkbox => {
                if (!checkbox.disabled && checkbox.getAttribute('data-column') !== 'image' && checkbox.getAttribute('data-column') !== 'actions') {
                    checkbox.checked = false;
                }
            });
        });
    }
    
    // Reset to Default
    if (resetBtn) {
        resetBtn.addEventListener('click', function() {
            const defaults = getDefaultVisible();
            updateCheckboxes(defaults);
        });
    }
    
    // Apply Changes
    if (applyBtn) {
        applyBtn.addEventListener('click', function() {
            const visibleColumns = getVisibleColumnsFromCheckboxes();
            // Update stored current visible columns
            currentVisibleColumns = [...visibleColumns];
            applyColumnVisibility(visibleColumns);
            saveColumnPreferences(visibleColumns);
            
            // Close modal using Bootstrap API
            const modal = bootstrap.Modal.getInstance(columnChooserModal);
            if (modal) {
                modal.hide();
            }
        });
    }

    // Persist and restore filters across navigation.
    if (restoreFiltersIfNeeded()) {
        return;
    }
    persistCurrentFilters();

    const filterForm = document.querySelector(`form[action="{{ route('admin.products.index') }}"]`);
    if (filterForm) {
        filterForm.addEventListener('submit', function() {
            setTimeout(persistCurrentFilters, 0);
        });
    }

    const perPageForm = perPageSelect ? perPageSelect.closest('form') : null;
    if (perPageForm) {
        perPageForm.addEventListener('submit', function() {
            setTimeout(persistCurrentFilters, 0);
        });
    }

    const clearFiltersBtn = document.getElementById('clearProductFiltersBtn');
    if (clearFiltersBtn) {
        clearFiltersBtn.addEventListener('click', function() {
            localStorage.removeItem(FILTER_STORAGE_KEY);
        });
    }
    
    // Variant expand/collapse functionality
    document.addEventListener('click', function(e) {
        if (e.target.closest('.variant-toggle')) {
            const button = e.target.closest('.variant-toggle');
            const productId = button.getAttribute('data-product-id');
            const icon = document.getElementById('toggle-icon-' + productId);
            const variantRows = document.querySelectorAll('.variant-row[data-parent-id="' + productId + '"]');
            
            if (variantRows.length > 0) {
                const isExpanded = variantRows[0].style.display !== 'none';
                
                variantRows.forEach(row => {
                    row.style.display = isExpanded ? 'none' : 'table-row';
                });
                
                // Update icon
                if (icon) {
                    icon.className = isExpanded ? 'bi bi-chevron-right' : 'bi bi-chevron-down';
                }
            }
        }
    });
    
    // Auto-expand if search term matches a variant
    @if(request('search') && isset($productType) && $productType === 'variant')
        const searchTerm = '{{ request('search') }}'.toLowerCase();
        const variantRows = document.querySelectorAll('.variant-row');

        variantRows.forEach(row => {
            const rowText = row.textContent.toLowerCase();
            if (rowText.includes(searchTerm)) {
                const parentId = row.getAttribute('data-parent-id');
                const parentRow = document.querySelector('.product-row[data-product-id="' + parentId + '"]');
                if (parentRow) {
                    const toggleButton = parentRow.querySelector('.variant-toggle');
                    if (toggleButton) {
                        const icon = document.getElementById('toggle-icon-' + parentId);
                        const allVariantRows = document.querySelectorAll('.variant-row[data-parent-id="' + parentId + '"]');
                        
                        allVariantRows.forEach(vRow => {
                            vRow.style.display = 'table-row';
                        });
                        
                        if (icon) {
                            icon.className = 'bi bi-chevron-down';
                        }
                    }
                }
            }
        });
    @endif
    
    // Initialize on page load
    initializeColumns();

    // Per-page selector submits via native GET form.
});
</script>
@endpush

@endsection