<div>
    <!-- Search and Filters -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="input-group">
                <span class="input-group-text"><i class="fas fa-search"></i></span>
                <input type="text" class="form-control" wire:model.live.debounce.300ms="search" 
                       placeholder="{{ __('Search products...') }}">
            </div>
        </div>
        <div class="col-md-6">
            <div class="d-flex gap-2 justify-content-end">
                <button type="button" class="btn btn-primary" wire:click="selectAll">
                    <i class="fas fa-check-square me-2"></i>{{ __('Select All') }}
                </button>
                <button type="button" class="btn btn-secondary" wire:click="deselectAll">
                    <i class="fas fa-square me-2"></i>{{ __('Deselect All') }}
                </button>
            </div>
        </div>
    </div>

    <!-- Product List -->
    <div class="card mb-4">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th width="50"></th>
                            <th>{{ __('Product') }}</th>
                            <th>{{ __('SKU') }}</th>
                            <th>{{ __('Category') }}</th>
                            <th>{{ __('Price') }}</th>
                            <th width="80">{{ __('Preview') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($products as $product)
                            <tr>
                                <td class="text-center">
                                    <input type="checkbox" class="form-check-input" 
                                           wire:click="toggleProduct({{ $product->id }})"
                                           @if(in_array($product->id, $selectedProducts)) checked @endif>
                                </td>
                                <td>
                                    <strong>{{ $product->localized_name }}</strong>
                                </td>
                                <td><code>{{ $product->sku }}</code></td>
                                <td>
                                    @if($product->category)
                                        <span class="badge bg-secondary">{{ $product->category->localized_name }}</span>
                                    @endif
                                </td>
                                <td>E£ {{ number_format($product->selling_price, 2) }}</td>
                                <td class="text-center">
                                    <img src="{{ $product->generateBarcodeImage() }}" 
                                         alt="Barcode" style="height: 30px;">
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-4 text-muted">
                                    {{ __('No products found') }}
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Printing Options -->
    @if(count($selectedProducts) > 0)
        <div class="card border-primary">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-print me-2"></i>{{ __('Print Options') }}
                    <span class="badge bg-light text-dark ms-2">{{ count($selectedProducts) }} {{ __('products selected') }}</span>
                </h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">{{ __('Label Size') }}</label>
                        <select class="form-select" wire:model.live="labelSize">
                            <option value="custom_25_12">{{ __('Custom') }} (25x12mm)</option>
                            <option value="small">{{ __('Small') }} (40x30mm)</option>
                            <option value="medium">{{ __('Medium') }} (50x40mm)</option>
                            <option value="large">{{ __('Large') }} (60x50mm)</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">{{ __('Copies per Product') }}</label>
                        <input type="number" min="1" max="100" class="form-control" wire:model.live="copies">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">{{ __('Include on Label') }}</label>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="showName" wire:model.live="showName">
                            <label class="form-check-label" for="showName">{{ __('Product Name') }}</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="showPrice" wire:model.live="showPrice">
                            <label class="form-check-label" for="showPrice">{{ __('Price') }}</label>
                        </div>
                    </div>
                </div>

                <hr>

                <div class="d-flex gap-2 justify-content-end">
                    <button type="button" class="btn btn-outline-secondary" wire:click="deselectAll">
                        <i class="fas fa-times me-2"></i>{{ __('Cancel') }}
                    </button>
                    <button type="button" class="btn btn-primary btn-lg" onclick="window.print()">
                        <i class="fas fa-print me-2"></i>{{ __('Print Labels') }}
                    </button>
                </div>
            </div>
        </div>

        <!-- Print Preview (Hidden, shows on print) -->
        <div class="d-none d-print-block mt-4">
            <div class="barcode-labels">
                @foreach($selectedProducts as $productId)
                    @php $product = $products->firstWhere('id', $productId); @endphp
                    @if($product)
                        @for($i = 0; $i < $copies; $i++)
                            <div class="barcode-label barcode-label-{{ $labelSize }}">
                                @if($showName)
                                    <div class="product-name">{{ $product->localized_name }}</div>
                                @endif
                                <div class="barcode-image">
                                    <img src="{{ $product->generateBarcodeImage() }}" alt="Barcode">
                                </div>
                                <div class="barcode-text">{{ $product->barcode ?? $product->sku }}</div>
                                @if($showPrice)
                                    <div class="product-price">E£ {{ number_format($product->selling_price, 2) }}</div>
                                @endif
                            </div>
                        @endfor
                    @endif
                @endforeach
            </div>
        </div>
    @endif

    <style>
        @media print {
            /* Hide everything except labels */
            body * {
                visibility: hidden;
            }
            .barcode-labels, .barcode-labels * {
                visibility: visible;
            }
            .barcode-labels {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
            }
        }

        .barcode-labels {
            display: flex;
            flex-wrap: wrap;
            gap: 2mm; /* Reduced gap for smaller labels */
            padding: 5mm;
        }

        .barcode-label {
            border: 1px dashed #ccc;
            padding: 1mm; /* Reduced padding */
            text-align: center;
            background: white;
            page-break-inside: avoid;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        /* Standard Sizes */
        .barcode-label-small { width: 40mm; height: 30mm; }
        .barcode-label-medium { width: 50mm; height: 40mm; }
        .barcode-label-large { width: 60mm; height: 50mm; }

        /* Custom Sizes */
        .barcode-label-custom_25_12 { 
            width: 25mm; 
            height: 12mm; 
            padding: 0.5mm;
        }
        
        .barcode-label-custom_25_12 .product-name {
            font-size: 5pt;
            margin-bottom: 0;
            white-space: nowrap;
        }
        
        .barcode-label-custom_25_12 .barcode-image img {
            height: 6mm; /* Constrain barcode height */
            width: auto;
            max-width: 100%;
        }

        .barcode-label-custom_25_12 .barcode-text {
            font-size: 5pt;
            margin-top: 0;
        }

        .barcode-label-custom_25_12 .product-price {
            font-size: 5pt;
            margin-top: 0;
        }

        .product-name {
            font-size: 8pt;
            font-weight: bold;
            margin-bottom: 1mm;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            width: 100%;
        }

        .barcode-image img {
            max-width: 100%;
            height: auto;
        }

        .barcode-text {
            font-family: 'Courier New', monospace;
            font-size: 7pt;
            margin-top: 1mm;
        }


        .product-price {
            font-weight: bold;
            font-size: 9pt;
            margin-top: 1mm;
        }
    </style>
</div>
