@section('title', __('newssection'))
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="container mt-4">
                <h2 class="text-center">Seleccionar Productos</h2>
            
                {{-- <input wire:model="keyWord" type="text" placeholder="Buscar productos..." class="form-control mb-3"> --}}
                @if (session()->has('message'))
                    <div class="alert alert-success">
                        {{ session('message') }}
                    </div>
                @endif
            
                <div class="form-group">
                    <label for="productos">Seleccionar Productos</label>
                    <div wire:init="cargarProductos">
                        @foreach ($productos as $row)
                            <div class="form-check">
                                <input 
                                    type="checkbox" 
                                    id="producto_{{ $row->id }}" 
                                    value="{{ $row->id }}" 
                                    wire:model="productosSeleccionados" 
                                    class="form-check-input"
                                    >
                                <label class="form-check-label" for="producto_{{ $row->id }}">
                                    {{ $row->id }} - {{ $row->nombre }}
                                </label>
                            </div>
                        @endforeach
                    </div>
                </div>
                
                <button type="button" wire:click="guardar" class="btn btn-primary mt-3">Guardar Selección</button>
                
                <div class="mt-4">
                    <h5>Productos Seleccionados:</h5>
                    <ul>
                        @foreach ($productosSeleccionados as $id)
                            <li>{{ collect($productos)->firstWhere('id', $id)['nombre'] }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>     
    </div>   
</div>


{{-- @section('js')
<script>
    document.addEventListener('livewire:load', function () {
        let select = $('#parametro');

        // Inicializar Select2
        select.select2({
            placeholder: 'Selecciona productos',
            allowClear: true
        });

        // Sincronizar con Livewire
        select.on('change', function () {
            @this.set('productosSeleccionados', $(this).val());
        });

        // Reinicializar Select2 en cada actualización de Livewire
        Livewire.hook('message.processed', (message, component) => {
            select.select2();
        });
    });
</script>
@stop --}}