@extends('layouts.admin')
@section('content')
    <section class="about-section style2 pb-0">
        <div class="container">
            
            <div class="clear">&nbsp;</div>
            
            

            <div class="section-wrapper padding-top padding-bottom">
                <h2 class="text-center">STICKER COMPRADOS</h2>
                <h5 class="text-center" style=" color:#F4CF31; font-size:30px;">
                    {{ @$dataCliente->nombre . ' ' . @$dataCliente->apellido }}</h5>
                <hr>

                <!-- Contenedor del input centrado -->
                <div class="row justify-content-center" style="padding: 10px;">
                    <div class="col-md-4 mb-3">
                        <input type="text" id="buscarNumero" class="form-control" placeholder="Buscar número">
                    </div>
                </div>

                <!-- Contenedor de los números generados -->
                <div class="row" style="padding: 10px;">
                    @forelse ($dataNumerosGenerados as $dataNumero)
                        <div class="col-md-2 mb-3 numeroGenerado">
                            <div class="card"
                                style="background:#F4CF31; border:1px solid #F4CF31;">
                                <div class="card-body text-center">
                                    <p class="card-text"
                                        style="color: #fff; font-size:30px; text-shadow: 2px 1px 2px #000; font-family: 'Lilita One', sans-serif;">
                                      
                                        {{ $dataNumero->numero_generado }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        @empty
                        <h1 class="text-center" style="color:#5271FF;">Sin Stickers disponibles</h1>
                    @endforelse
                </div>
                <hr>
                <div class="col-md-12 text-center">
                      <a href="{{ url('home') }}" class="btn btn-primary" style="font-size: 20px; padding: 15px 30px;">Comprar Mas Stickers</a>
                </div>
            </div>
        </div>
    </section>

    <script>
        // Función para filtrar números al escribir en el input
        document.getElementById('buscarNumero').addEventListener('keyup', function() {
            var inputText = this.value.toLowerCase();
            var numerosGenerados = document.getElementsByClassName('numeroGenerado');

            // Mostrar solo los números que coinciden con la búsqueda y ocultar los demás
            Array.from(numerosGenerados).forEach(function(numeroGenerado) {
                var textoNumero = numeroGenerado.textContent || numeroGenerado.innerText;
                var numero = textoNumero.toLowerCase();

                if (numero.includes(inputText)) {
                    numeroGenerado.style.display = "";
                } else {
                    numeroGenerado.style.display = "none";
                }
            });
        });
    </script>
@endsection