@extends('layouts.admin')
@section('content')
    <style>
        #loadingContainer {
            text-align: center;
            padding: 50px;
        }

        #loadingContainer img {
            width: 150px;
            margin-bottom: 20px;
        }

        #loadingContainer h3 {
            color: #F4CF31;
            font-size: 28px;
            margin-bottom: 10px;
        }

        #loadingContainer p {
            color: #fff;
            font-size: 18px;
        }

        #numerosContainer {
            display: none;
        }
    </style>

    <section class="about-section style2 pb-0">
        <div class="container">

            <div class="clear">&nbsp;</div>

            <div class="section-wrapper padding-top padding-bottom">

                <!-- Loading mientras se generan los números -->
                <div id="loadingContainer">
                    <img src="https://i.gifer.com/ZZ5H.gif" alt="Cargando...">
                    <h3>Procesando tu pago...</h3>
                    <p>Estamos generando tus números de la suerte.</p>
                    <p style="color: #F4CF31;">Este proceso puede tardar unos segundos, por favor espera.</p>
                </div>

                <!-- Contenedor de números (oculto inicialmente) -->
                <div id="numerosContainer">
                    <h2 class="text-center">STICKERS 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" id="numerosGrid" style="padding: 10px;">
                        @foreach ($dataNumeros 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>
                        @endforeach
                    </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>
        </div>
    </section>


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loadingContainer = document.getElementById('loadingContainer');
            const numerosContainer = document.getElementById('numerosContainer');
            const numerosGrid = document.getElementById('numerosGrid');

            // Verificar si hay números generados
            const tieneNumeros = numerosGrid.children.length > 0;

            if (tieneNumeros) {
                // Si ya hay números, mostrarlos inmediatamente
                loadingContainer.style.display = 'none';
                numerosContainer.style.display = 'block';
            } else {
                // Si no hay números, verificar cada 2 segundos
                let intentos = 0;
                const maxIntentos = 30; // 30 intentos = 1 minuto

                const interval = setInterval(function() {
                    intentos++;

                    // Recargar la página para verificar si ya se generaron los números
                    fetch(window.location.href)
                        .then(response => response.text())
                        .then(html => {
                            const parser = new DOMParser();
                            const doc = parser.parseFromString(html, 'text/html');
                            const nuevosNumeros = doc.getElementById('numerosGrid');

                            if (nuevosNumeros && nuevosNumeros.children.length > 0) {
                                // Si ya se generaron los números, recargar la página
                                clearInterval(interval);
                                window.location.reload();
                            } else if (intentos >= maxIntentos) {
                                // Si pasó 1 minuto y no hay números, mostrar error
                                clearInterval(interval);
                                loadingContainer.innerHTML = `
                                    <img src="https://i.gifer.com/ZZ5H.gif" alt="Cargando...">
                                    <h3 style="color: #ff4444;">Tardando más de lo esperado</h3>
                                    <p style="color: #fff;">El proceso está tomando más tiempo del normal.</p>
                                    <p style="color: #F4CF31;">Por favor, recarga la página o contacta con soporte.</p>
                                    <button onclick="window.location.reload()" class="btn btn-primary" style="margin-top: 20px;">
                                        Recargar Página
                                    </button>
                                `;
                            }
                        })
                        .catch(error => {
                            console.error('Error verificando números:', error);
                        });
                }, 2000); // Verificar cada 2 segundos
            }

            // Función para filtrar números al escribir en el input
            const buscarInput = document.getElementById('buscarNumero');
            if (buscarInput) {
                buscarInput.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