@extends('layouts.admin')
@section('content')
    <style>
        /* Botón flotante de WhatsApp */
        .whatsapp-float {
            position: fixed;
            width: 50px;
            height: 50px;
            bottom: 20px;
            right: 20px;
            background-color: #25d366;
            color: #FFF;
            border-radius: 50px;
            text-align: center;
            font-size: 26px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .whatsapp-float:hover {
            background-color: #20ba5a;
            transform: scale(1.1);
            box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.4);
        }

        .whatsapp-float i {
            margin-top: 3px;
        }

        @media screen and (max-width: 767px) {
            .whatsapp-float {
                width: 45px;
                height: 45px;
                bottom: 15px;
                right: 15px;
                font-size: 22px;
            }
        }

        .progress-bar {
            width: 70%;
            margin: 0 auto;
            background-color: #1a1a1a;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
            position: relative;
            /* Añadido para que el número se centre */
        }

        .progress {
            height: 50px;
            background-color: #126A04;
            background-size: cover;
            border-radius: 10px;
            transition: width 0.5s ease-in-out;
            width: 0;
            /* Asume que el progreso comienza desde 0 */
        }

        .progress-label {
            font-size: 25px;
            font-weight: bold;
            color: #fff;
            font-family: 'Lilita One', sans-serif;
            position: absolute;
            /* Añadido para centrar el número */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            /* Asegura que el número esté por encima de la barra de progreso */
        }

        .popular-label {
            background-color: #EB1C24;
            /* Color de fondo */
            color: #fff;
            /* Color del texto */
            padding: 5px 10px;
            /* Espaciado interno */
            border-radius: 5px;
            /* Bordes redondeados */
            position: absolute;
            /* Posición absoluta para superponerla en la esquina */
            top: 10px;
            /* Ajuste vertical */
            right: 10px;
            /* Ajuste horizontal */
            font-size: 12px;
            /* Tamaño del texto */
        }

        .price-item {
            position: relative;
            margin: 0 auto;
            /* Centra horizontalmente los cuadros de precios */
            text-align: center;
            /* Alinea el contenido dentro del cuadro de precios al centro */
        }

        @media screen and (max-width: 767px) {

            .price-item h6,
            .price-item h2 {
                font-size: 18px;
                /* Tamaño de fuente para dispositivos móviles */
            }

            .price-title {
                font-size: 2rem !important;
            }

            .price-subtitle {
                font-size: 0.85rem !important;
            }

            .price-value {
                font-size: 1.3rem !important;
            }

            .rifasB {
                margin-top: -100px;
            }

            .rifa-imagen {
                width: 200%;
                /* Ajusta este valor según sea necesario */
            }

            .numeroGenerado .card-text {
                font-size: 25px !important;
            }

            #rifaImg {
                width: 40%;
                /* En móviles, la imagen ocupará un 40% del contenedor */
                margin: 0 auto;
                /* Centra la imagen */
                display: block;
                /* Hace que la imagen sea un bloque */
            }

            /* Botón de compra en móvil */
            .btn-buy {
                background: #126A04 !important;
                color: #fff !important;
                border: none !important;
                border-radius: 20px !important;
                padding: 8px 15px !important;
                font-size: 0.75rem !important;
                font-weight: 900 !important;
                cursor: pointer;
                transition: all 0.3s ease;
                width: 100% !important;
                box-shadow: 0 3px 10px rgba(18, 106, 4, 0.4) !important;
                text-transform: uppercase !important;
                letter-spacing: 0.5px !important;
            }

            .price-item {
                padding: 12px 10px !important;
                margin: 5px !important;
            }
        }

        /* Estilo base para la imagen */
        .rifa-imagen {
            width: 100%;
            height: auto;
        }

        /* Contenedor de la imagen con estilo */
        .about-image {
            max-width: 200px;
            margin: 0 auto;
        }

        .about-image img {
            width: 100%;
            height: auto;
            max-width: 180px;
        }

        /* Estilo para el contenedor de la tarjeta */
        .price-item {
            background-color: #1a1a1a;
            color: white;
            border-radius: 15px;
            padding: 20px 15px;
            margin: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            text-align: center;
            border: 2px solid #333;
        }

        /* Estilo para el título - número grande */
        .price-title {
            color: #fff;
            font-size: 2.5rem;
            font-weight: 900;
            margin-bottom: 3px;
            line-height: 1;
        }

        /* Estilo para subtítulo */
        .price-subtitle {
            color: #fff;
            font-size: 20px;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 12px;
        }

        /* Estilo para el precio */
        .price-value {
            font-size: 1.5rem;
            font-weight: bold;
            color: #FFD700;
            margin-bottom: 12px;
        }

        /* Estilo para el precio original (cuando hay oferta) */
        .original-price {
            text-decoration: line-through;
            color: #aaa;
            font-size: 1.2rem;
        }

        /* Estilo para el texto de la oferta */
        .offer-text {
            font-size: 1rem;
            color: #FFD700;
        }

        /* Estilo para el botón de comprar */
        .btn-buy {
            background: #126A04 !important;
            color: #fff !important;
            border: none !important;
            border-radius: 25px !important;
            padding: 10px 25px !important;
            font-size: 0.9rem !important;
            font-weight: 900 !important;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            box-shadow: 0 4px 10px rgba(18, 106, 4, 0.4) !important;
            text-transform: uppercase !important;
            letter-spacing: 1px !important;
        }

        .btn-buy:hover {
            background: #0e5203 !important;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(18, 106, 4, 0.6) !important;
        }
    </style>

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


            <div class="section-wrapper padding-top padding-bottom">
                {{-- <h1 class="text-center" style="font-size:40px; text-shadow: 2px 1px 2px #000; color:#fff">
                    <span style="color: #fff">{{ $dataRifa->tituloRifa }}</span>
                </h1> --}}

                <div class="clear">&nbsp;</div>
                <h1 class="text-center" style="font-size:30px; text-shadow: 2px 1px 2px #000; color:#fff; margin-top:-28px;">
                    {{ $dataRifa->nombre }}
                </h1>

                <div class="col-12 text-center" style="margin-top: 20px;">
                    <div class="about-image position-relative">
                        <img src="{{ url('assets/images/imagesRifas/' . $imagenNombre) }}" alt="Imagen de la rifa"
                            class="w-100 img-responsive img-full-mobile" id="rifaImg">
                    </div>
                </div>

                <div class="clear">&nbsp;</div>
                <div class="col-md-12">

                    <h5 style=" color:#fff;" class="text-center">Stickers
                        Limitados!
                    </h5>


                    <div class="progress-bar">
                        <div id="progressLabel" class="progress-label text-center"></div>
                        <div id="progress" class="progress"></div>
                    </div>

                    <input type="hidden" id="idRifa" value="{{ $dataRifa->id }}">
                    <small id="visitantes" style="display: block; margin: 0 auto; text-align: center; color: #fff">10
                        comprando en este
                        momento </small>
                </div>



                <hr style="border: 1px solid #FFD700">

                <div class="row">

                    <div class="col-lg-12 col-md-12 rifasB" style="margin-top: 50px;">

                        <div class="about-wrapper">
                            <div class="row g-4 justify-content-center">
                                <p class="text-center"
                                    style="font-size: 25px; text-shadow: 2px 1px 2px #000; color: #FFD700; margin-top:-45px;">
                                    <b> 8 STICKERS
                                        BENDECIDOS </b>
                                </p>
                                <div class="col-lg-12">
                                    <div class="row justify-content-center" style="padding: 10px; margin-top:-30px;">
                                        @foreach ($numeroPremiados as $dataNumero)
                                            <div class="col-6 col-sm-4 col-md-3 col-lg-3 mb-3 text-center">
                                                <div class="numeroGenerado" id="numGen"
                                                    style="background:#126A04; border:1px solid #2f3335;">

                                                    <p class="card-text"
                                                        style="color: #fff; font-size: 20px !important; text-shadow: 2px 1px 2px #000; font-family: 'Lilita One', sans-serif; padding: 5px;">
                                                        <b></b> {{ $dataNumero->numeroPremiados }}
                                                    </p>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                <hr style="border: 1px solid #FFF">

                                <div class="col-6 col-sm-6 col-lg-6">
                                    <a href="{{ route('carrito', ['cantidad' => $id1]) }}"
                                        style="display:block; text-decoration:none;">
                                        <div class="price-item">
                                            <div class="price-item-inner">
                                                <h1 class="price-title">{{ $id1 }}</h1>
                                                <p class="price-subtitle">STICKERS</p>
                                                <h2 class="price-value">$ {{ number_format($x2) }}</h2>

                                                <!-- Botón -->
                                                <button class="btn-buy">Comprar</button>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                <div class="col-6 col-sm-6 col-lg-6">
                                    <a href="{{ route('carrito', ['cantidad' => $id2]) }}"
                                        style="display:block; text-decoration:none;">
                                        <div class="price-item">
                                            <div class="price-item-inner">
                                                <h1 class="price-title">{{ $id2 }}</h1>
                                                <p class="price-subtitle">STICKERS</p>
                                                <h2 class="price-value">$ {{ number_format($x4) }}</h2>

                                                <!-- Botón -->
                                                <button class="btn-buy">Comprar</button>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                <div class="col-6 col-sm-6 col-lg-6">
                                    <a href="{{ route('carrito', ['cantidad' => $id3]) }}"
                                        style="display:block; text-decoration:none;">
                                        <div class="price-item">
                                            <div class="price-item-inner">
                                                <h1 class="price-title">{{ $id3 }}</h1>
                                                <p class="price-subtitle">STICKERS</p>
                                                <h2 class="price-value">$ {{ number_format($x10) }}</h2>

                                                <!-- Botón -->
                                                <button class="btn-buy">Comprar</button>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                <div class="col-6 col-sm-6 col-lg-6">
                                    <a href="{{ route('carrito', ['cantidad' => $id4]) }}"
                                        style="display:block; text-decoration:none;">
                                        <div class="price-item">
                                            <div class="price-item-inner">
                                                <h1 class="price-title">{{ $id4 }}</h1>
                                                <p class="price-subtitle">STICKERS</p>
                                                <h2 class="price-value">$ {{ number_format($x50) }}</h2>

                                                <!-- Botón -->
                                                <button class="btn-buy">Comprar</button>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- <div class="col-lg-12">
                        <div class="row">
                            <div class="col-lg-6"></div>
                            <div class="col-lg-6">
                                <hr style="border: 1px solid #ffcd52">
                                <h2 class="text-center" style="text-shadow: 1px 1px 1px #000; color:#fff;">
                                    ¿CUÁNTAS COMBOS QUIERES COMPRAR HOY?</h2>
                                <input type="number" style="border: 1px solid #ffcd52;" class="form-control"
                                    name="cantidadV" id="cantidadV" placeholder="Ingrese cantidad deseada">

                                <div class="col-lg-12 text-center">
                                    <div class="clear">&nbsp;</div>
                                    <form id="carritoForm" action="#" method="GET">
                                        <input type="hidden" name="cantidad" id="cantidadHidden" value="">
                                        <button type="submit" id="comprarBtn" class="btn btn-primary"
                                            style="background-image: url('{{url('assets/images/botonMR.png')}}'); background-size: cover; background-repeat: no-repeat; background-position: center; border:1px solid #FFD700; padding: 15px 30px; font-size: 18px; color:#000;"><b>Comprar
                                                Ahora - COMBOS x0 </b></button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div> --}}
                    <div class="col-lg-12">
                        <div class="row">
                            <div class="col-lg-6"></div>
                            <div class="col-lg-6 text-center">
                                <hr style="border: 1px solid #ffcd52">
                                <h2 class="text-center" style="text-shadow: 1px 1px 1px #000; color:#fff; font-size: 20px;">
                                    VER STICKERS COMPRADOS</h2>
                                <span style="color: #fff; font-size: 14px;">Escribe tu número de celular para ver los stickers comprados</span>
                                <div class="clear">&nbsp;</div>
                                <form action="{{ route('numGeneradoCliente') }}" method="GET">
                                    <input type="number" style="border: 1px solid #ffcd52" class="form-control"
                                        name="cantidadV" id="cantidadV" placeholder="Ingrese su numero de celular"
                                        required>
                                    <div class="col-lg-12 text-center">
                                        <div class="clear">&nbsp;</div>
                                        <button type="submit" id="comprarBtn" class="btn btn-primary"
                                            style="background: #FFD700; border: 1px solid #FFD700; padding: 12px 25px; font-size: 16px; color: #000; font-weight: 900; border-radius: 25px;"><b>Ver
                                                Stickers</b></button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 text-center" style="margin-bottom: -20px;">
                        <hr style="border: 1px solid #ffcd52">
                        <h2 class="text-center" style="font-size: 20px;">PARA COMPRAR TUS STICKERS POR TRANSFERENCIA DARLE CLIC AL BOTÓN DE ABAJO</h2>
                        <div class="clear">&nbsp;</div>

                        <a href="https://wa.me/573146948206" target="_blank" class="btn btn-success" style=" font-size:23px;">Comprar Ahora Mismo</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===========About Section Ends Here========== -->
    <script>
        // Función para actualizar la barra de progreso basada en la cantidad obtenida de la base de datos
        function actualizarBarraProgreso() {
            // Realizar una solicitud AJAX para obtener la cantidad de registros

            var idRifa = document.getElementById('idRifa').value;

            $.ajax({
                url: "{{ route('obtener-cantidad-registros') }}",
                type: "GET",
                data: {
                    idRifa: idRifa // Pasar el valor de idRifa al servidor
                },
                success: function(response) {
                    var cantidadRegistros = response.cantidadRegistros;
                    //var cantidadRegistros = 5000;

                    var porcentajeCompletado = (cantidadRegistros / 9999) * 100;

                    var progressBar = document.getElementById('progress');

                    progressBar.style.width = porcentajeCompletado + '%';

                    var progressLabel = document.getElementById('progressLabel');
                    progressLabel.textContent = porcentajeCompletado.toFixed(2) +
                        '%';
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }

        // Llamar a la función para actualizar la barra de progreso cada cierto intervalo de tiempo
        setInterval(actualizarBarraProgreso, 1000); // Actualizar cada 5 segundos (5000 milisegundos)



        // Función para generar un número aleatorio entre un rango dado
        function generarNumeroAleatorio(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        // Función para actualizar el número aleatorio cada 10 segundos
        function actualizarNumeroAleatorio() {
            var numeroAleatorio = generarNumeroAleatorio(1, 15);
            visitantesElemento.textContent = numeroAleatorio + ' Personas comprando en este momento';
        }

        // Obtener el elemento <small> por su ID
        var visitantesElemento = document.getElementById('visitantes');

        // Llamar a la función actualizarNumeroAleatorio cada 10 segundos (10000 milisegundos)
        setInterval(actualizarNumeroAleatorio, 5000); // Actualizar cada 10 segundos

        // Ejecutar la función inicialmente para mostrar un número al cargar la página
        actualizarNumeroAleatorio();


        // Obtener el input y el botón
        const cantidadInput = document.getElementById('cantidadV');
        const cantidadHidden = document.getElementById('cantidadHidden');
        const comprarBtn = document.getElementById('comprarBtn');

        // Escuchar el evento de cambio en el input
        cantidadInput.addEventListener('input', function() {
            // Obtener el valor del input
            const cantidad = cantidadInput.value;

            // Actualizar el valor del campo hidden
            cantidadHidden.value = cantidad;

            // Actualizar el texto del botón
            comprarBtn.innerHTML = `<b>Comprar Ahora - COMBOS x${cantidad}</b>`;
        });
    </script>

    <!-- Botón flotante de WhatsApp -->
    <a href="https://wa.me/573146948206" class="whatsapp-float" target="_blank" rel="noopener noreferrer">
        <i class="icofont-whatsapp"></i>
    </a>
@endsection