<x-filament-panels::page>
    <style>
        /* Custom Premium Styles for Bulk Edit Stock */
        .bulk-stock-container {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            font-family: inherit;
        }

        .bulk-stock-bar {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 1.5rem;
            background: #ffffff;
            padding: 1rem 1.5rem;
            border-radius: 0.75rem;
            border: 1px solid #f3f4f6;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.025);
            transition: all 0.3s ease;
        }

        .dark .bulk-stock-bar {
            background: #18181b;
            border-color: #27272a;
            box-shadow: none;
        }

        @media (max-width: 768px) {
            .bulk-stock-bar {
                flex-direction: column;
                align-items: stretch;
            }
        }

        .bulk-search-wrapper {
            position: relative;
            flex-grow: 1;
            max-width: 28rem;
        }

        .bulk-search-input {
            width: 100%;
            padding: 0.625rem 1rem 0.625rem 2.75rem;
            font-size: 0.875rem;
            border-radius: 0.5rem;
            border: 1px solid #e5e7eb;
            background: #f9fafb;
            color: #1f2937;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .bulk-search-input:focus {
            outline: none;
            border-color: #6366f1;
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
        }

        .dark .bulk-search-input {
            background: #09090b;
            border-color: #27272a;
            color: #f4f4f5;
        }

        .dark .bulk-search-input:focus {
            background: #18181b;
            border-color: #6366f1;
        }

        .bulk-search-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            width: 1.25rem !important;
            height: 1.25rem !important;
            pointer-events: none;
        }

        .bulk-save-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.625rem 1.5rem;
            font-size: 0.875rem;
            font-weight: 600;
            color: #ffffff;
            background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
            border: none;
            border-radius: 0.5rem;
            cursor: pointer;
            box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2), 0 2px 4px -1px rgba(99, 102, 241, 0.1);
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .bulk-save-btn:hover {
            background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
            transform: translateY(-1px);
            box-shadow: 0 8px 16px -2px rgba(99, 102, 241, 0.25), 0 4px 8px -2px rgba(99, 102, 241, 0.15);
        }

        .bulk-save-btn:active {
            transform: translateY(0);
        }

        .bulk-save-btn svg {
            width: 1.25rem !important;
            height: 1.25rem !important;
        }

        .bulk-table-container {
            background: #ffffff;
            border-radius: 0.75rem;
            border: 1px solid #f3f4f6;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.025);
            overflow-x: auto;
            transition: all 0.3s ease;
        }

        .dark .bulk-table-container {
            background: #18181b;
            border-color: #27272a;
            box-shadow: none;
        }

        .bulk-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
        }

        .bulk-table th {
            background: #f9fafb;
            padding: 1rem 1.5rem;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #6b7280;
            border-bottom: 1px solid #f3f4f6;
        }

        .dark .bulk-table th {
            background: #202023;
            color: #a1a1aa;
            border-bottom-color: #27272a;
        }

        .bulk-table td {
            padding: 0.875rem 1.5rem;
            vertical-align: middle;
            border-bottom: 1px solid #f9fafb;
            color: #374151;
        }

        .dark .bulk-table td {
            border-bottom-color: #202023;
            color: #d1d5db;
        }

        .bulk-table tr:last-child td {
            border-bottom: none;
        }

        .product-row {
            background: rgba(249, 250, 251, 0.7);
            font-weight: 700;
        }

        .dark .product-row {
            background: rgba(39, 39, 42, 0.4);
        }

        .variant-row {
            transition: background-color 0.15s ease;
        }

        .variant-row:hover {
            background-color: #fcfcfd;
        }

        .dark .variant-row:hover {
            background-color: #202023;
        }

        .product-info-cell {
            display: flex;
            align-items: center;
            gap: 0.875rem;
        }

        .product-name-span {
            font-weight: 600;
            color: #111827;
        }

        .dark .product-name-span {
            color: #ffffff;
        }

        .product-img-wrapper {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 0.375rem;
            border: 1px solid #e5e7eb;
            background: #f3f4f6;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .dark .product-img-wrapper {
            border-color: #27272a;
            background: #09090b;
        }

        .product-img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .product-img-placeholder {
            font-size: 0.625rem;
            color: #9ca3af;
            font-weight: 500;
            text-transform: uppercase;
        }

        .badge-total {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 600;
            border-radius: 9999px;
            background: #eef2ff;
            color: #4f46e5;
        }

        .dark .badge-total {
            background: rgba(99, 102, 241, 0.1);
            color: #818cf8;
        }

        .badge-stock {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 700;
            border-radius: 9999px;
        }

        .badge-stock.success {
            background: #ecfdf5;
            color: #059669;
        }

        .dark .badge-stock.success {
            background: rgba(16, 185, 129, 0.1);
            color: #34d399;
        }

        .badge-stock.warning {
            background: #fffbeb;
            color: #d97706;
        }

        .dark .badge-stock.warning {
            background: rgba(245, 158, 11, 0.1);
            color: #fbbf24;
        }

        .variant-indent {
            padding-left: 3rem !important;
            position: relative;
            font-weight: 500;
            color: #4b5563;
        }

        .dark .variant-indent {
            color: #a1a1aa;
        }

        .variant-indent::before {
            content: "↳";
            position: absolute;
            left: 1.5rem;
            color: #9ca3af;
            font-weight: 700;
        }

        .sku-mono {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: 0.75rem;
            font-weight: 600;
            color: #4b5563;
        }

        .dark .sku-mono {
            color: #a1a1aa;
        }

        .option-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.125rem 0.5rem;
            font-size: 0.75rem;
            font-weight: 500;
            background: #f3f4f6;
            border: 1px solid #e5e7eb;
            border-radius: 0.375rem;
            color: #4b5563;
            margin-right: 0.375rem;
            margin-bottom: 0.125rem;
        }

        .dark .option-badge {
            background: #202023;
            border-color: #27272a;
            color: #d1d5db;
        }

        .option-badge strong {
            color: #6b7280;
            margin-right: 0.25rem;
        }

        .dark .option-badge strong {
            color: #9ca3af;
        }

        .stock-input {
            width: 7.5rem;
            padding: 0.375rem 0.75rem;
            font-size: 0.875rem;
            font-weight: 500;
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            background: #ffffff;
            color: #1f2937;
            transition: all 0.15s ease;
        }

        .stock-input:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
        }

        .dark .stock-input {
            background: #09090b;
            border-color: #27272a;
            color: #f4f4f5;
        }

        .dark .stock-input:focus {
            background: #18181b;
            border-color: #6366f1;
        }

        .pagination-wrapper {
            margin-top: 1rem;
        }

        .cb-col {
            width: 2.75rem;
            text-align: center;
            padding-left: 1rem !important;
            padding-right: 0.5rem !important;
        }

        .bulk-checkbox {
            width: 1rem;
            height: 1rem;
            border-radius: 0.25rem;
            accent-color: #6366f1;
            cursor: pointer;
        }

        .bulk-actions-bar {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            background: #f5f3ff;
            padding: 0.75rem 1.5rem;
            border-radius: 0.75rem;
            border: 1px solid #ddd6fe;
            box-shadow: 0 4px 6px -1px rgba(139, 92, 246, 0.05);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            animation: slideDown 0.2s ease-out;
        }

        .dark .bulk-actions-bar {
            background: rgba(139, 92, 246, 0.1);
            border-color: rgba(139, 92, 246, 0.2);
            box-shadow: none;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 1024px) {
            .bulk-actions-bar {
                flex-direction: column;
                align-items: stretch;
            }
        }

        .bulk-actions-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 0.875rem;
            font-weight: 600;
            color: #5b21b6;
        }

        .dark .bulk-actions-info {
            color: #ddd6fe;
        }

        .bulk-actions-tools {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        @media (max-width: 640px) {
            .bulk-actions-tools {
                flex-direction: column;
                align-items: stretch;
            }
        }

        .bulk-tool-group {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .bulk-tool-input {
            width: 7.5rem;
            padding: 0.375rem 0.625rem;
            font-size: 0.875rem;
            border: 1px solid #c084fc;
            border-radius: 0.375rem;
            background: #ffffff;
            color: #1f2937;
            transition: all 0.15s ease;
        }

        .bulk-tool-input:focus {
            outline: none;
            border-color: #a855f7;
            box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
        }

        .dark .bulk-tool-input {
            background: #09090b;
            border-color: #7c3aed;
            color: #f4f4f5;
        }

        .dark .bulk-tool-input:focus {
            background: #18181b;
            border-color: #a855f7;
        }

        .bulk-tool-btn {
            padding: 0.375rem 0.875rem;
            font-size: 0.875rem;
            font-weight: 600;
            color: #ffffff;
            background: #7c3aed;
            border: none;
            border-radius: 0.375rem;
            cursor: pointer;
            transition: background 0.15s ease;
        }

        .bulk-tool-btn:hover {
            background: #6d28d9;
        }
    </style>

    <div class="bulk-stock-container">
        <!-- Search and Action Bar -->
        <div class="bulk-stock-bar">
            <div class="bulk-search-wrapper">
                <svg class="bulk-search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
                <input 
                    type="search" 
                    wire:model.live.debounce.300ms="search" 
                    placeholder="Search by product name, SKU..." 
                    class="bulk-search-input"
                />
            </div>
            
            <button wire:click="save" class="bulk-save-btn">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path>
                </svg>
                Save Stock Changes
            </button>
        </div>

        <!-- Bulk Actions Bar (shown when items are selected) -->
        @php $selectedCount = $this->getSelectedCount(); @endphp
        @if($selectedCount > 0)
        <div class="bulk-actions-bar">
            <div class="bulk-actions-info">
                <svg style="width:1.25rem;height:1.25rem;flex-shrink:0;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                {{ $selectedCount }} item{{ $selectedCount !== 1 ? 's' : '' }} selected
            </div>
            <div class="bulk-actions-tools">
                <!-- Adjust Quantity -->
                <div class="bulk-tool-group">
                    <label style="font-size:0.8rem;font-weight:600;color:#6d28d9;white-space:nowrap;">Adjust Qty:</label>
                    <input 
                        type="text" 
                        wire:model="bulkQuantityAdjust" 
                        placeholder="e.g. +10 or 50"
                        class="bulk-tool-input"
                    />
                    <button wire:click="applyBulkQuantityAdjust" class="bulk-tool-btn">Apply</button>
                </div>
                <!-- Set Security Stock -->
                <div class="bulk-tool-group">
                    <label style="font-size:0.8rem;font-weight:600;color:#6d28d9;white-space:nowrap;">Set Safety Stock:</label>
                    <input 
                        type="number" 
                        wire:model="bulkSecurityStockSet" 
                        placeholder="e.g. 5"
                        class="bulk-tool-input"
                        min="0"
                    />
                    <button wire:click="applyBulkSecurityStockSet" class="bulk-tool-btn">Apply</button>
                </div>
            </div>
        </div>
        @endif

        <!-- Spreadsheet Grid -->
        <div class="bulk-table-container">
            <table class="bulk-table">
                <thead>
                    <tr>
                        <th class="cb-col">
                            <input 
                                type="checkbox" 
                                class="bulk-checkbox"
                                wire:change="toggleSelectAllPage($event.target.checked)"
                                title="Select / deselect all on this page"
                            />
                        </th>
                        <th>Item Details</th>
                        <th>SKU</th>
                        <th>Options</th>
                        <th style="text-align: center;">Current Stock</th>
                        <th style="width: 150px;">New Quantity</th>
                        <th style="width: 150px;">Security Stock</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($products as $product)
                        @if($product->variants->isNotEmpty())
                            <!-- Product Header Row (with variants — not selectable) -->
                            <tr class="product-row">
                                <td class="cb-col">—</td>
                                <td>
                                    <div class="product-info-cell">
                                        <div class="product-img-wrapper">
                                            @if($imageUrl = $product->getFirstMediaUrl('images', 'webp'))
                                                <img src="{{ $imageUrl }}" />
                                            @else
                                                <span class="product-img-placeholder">No Img</span>
                                            @endif
                                        </div>
                                        <span class="product-name-span">{{ $product->name }}</span>
                                    </div>
                                </td>
                                <td class="sku-mono">—</td>
                                <td>—</td>
                                <td style="text-align: center;">
                                    <span class="badge-total">
                                        {{ $product->quantity }} (Total)
                                    </span>
                                </td>
                                <td>—</td>
                                <td>—</td>
                            </tr>
                            <!-- Variant Rows -->
                            @foreach($product->variants as $variant)
                                <tr class="variant-row">
                                    <td class="cb-col">
                                        <input 
                                            type="checkbox" 
                                            class="bulk-checkbox"
                                            wire:model="selected.variant.{{ $variant->id }}"
                                        />
                                    </td>
                                    <td class="variant-indent">
                                        {{ $product->name }}
                                    </td>
                                    <td class="sku-mono">{{ $variant->sku }}</td>
                                    <td>
                                        @foreach($variant->options ?? [] as $key => $val)
                                            <span class="option-badge">
                                                <strong>{{ $key }}:</strong>{{ $val }}
                                            </span>
                                        @endforeach
                                    </td>
                                    <td style="text-align: center;">
                                        <span class="badge-stock {{ $variant->quantity <= ($variant->security_stock ?? 0) ? 'warning' : 'success' }}">
                                            {{ $variant->quantity }}
                                        </span>
                                    </td>
                                    <td>
                                        <input 
                                            type="number" 
                                            wire:model="quantities.variant.{{ $variant->id }}" 
                                            class="stock-input"
                                        />
                                    </td>
                                    <td>
                                        <input 
                                            type="number" 
                                            wire:model="securityStocks.variant.{{ $variant->id }}" 
                                            class="stock-input"
                                        />
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <!-- Simple Product Row -->
                            <tr class="variant-row">
                                <td class="cb-col">
                                    <input 
                                        type="checkbox" 
                                        class="bulk-checkbox"
                                        wire:model="selected.product.{{ $product->id }}"
                                    />
                                </td>
                                <td>
                                    <div class="product-info-cell">
                                        <div class="product-img-wrapper">
                                            @if($imageUrl = $product->getFirstMediaUrl('images', 'webp'))
                                                <img src="{{ $imageUrl }}" />
                                            @else
                                                <span class="product-img-placeholder">No Img</span>
                                            @endif
                                        </div>
                                        <span class="product-name-span">{{ $product->name }}</span>
                                    </div>
                                </td>
                                <td class="sku-mono">{{ $product->sku }}</td>
                                <td>—</td>
                                <td style="text-align: center;">
                                    <span class="badge-stock {{ $product->quantity <= ($product->security_stock ?? 0) ? 'warning' : 'success' }}">
                                        {{ $product->quantity }}
                                    </span>
                                </td>
                                <td>
                                    <input 
                                        type="number" 
                                        wire:model="quantities.product.{{ $product->id }}" 
                                        class="stock-input"
                                    />
                                </td>
                                <td>
                                    <input 
                                        type="number" 
                                        wire:model="securityStocks.product.{{ $product->id }}" 
                                        class="stock-input"
                                    />
                                </td>
                            </tr>
                        @endif
                    @empty
                        <tr>
                            <td colspan="7" style="text-align: center; padding: 2.5rem; color: #9ca3af;">
                                No products found matching your search.
                            </td>
                        </tr>
                    @endempty
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="pagination-wrapper">
            <x-filament::pagination 
                :paginator="$products" 
                :page-options="[5, 10, 15, 25, 50, 'all']"
                current-page-option-property="perPage"
            />
        </div>
    </div>

    <!-- Dirty Check Script -->
    <script>
        document.addEventListener('livewire:initialized', () => {
            let formDirty = false;

            // Listen to input changes in the table
            document.querySelector('table')?.addEventListener('input', (e) => {
                if (e.target.tagName === 'INPUT') {
                    formDirty = true;
                }
            });

            // Reset dirty state on Livewire updates that save data
            Livewire.on('saved', () => {
                formDirty = false;
            });

            // Prevent closing browser without saving
            window.addEventListener('beforeunload', (e) => {
                if (formDirty) {
                    e.preventDefault();
                    e.returnValue = 'You have unsaved stock changes. Are you sure you want to leave?';
                }
            });
        });
    </script>
</x-filament-panels::page>
