@extends('app')
@section('titulo', 'Renovar Hotspot'.' - '.config('app.name'))
@section('contenido')
    <div class="row">
        <div class="col-md-12 text-center">
            <h1 class="text-capitalize">Renovar {{ str_replace('-', ' ', $hotspot['nombre']) }}</h1>
            <p>
                Para que tu hotspot sea considerado para ser votado por otros usuarios, debes primero votar a 5 hotspots
                aleatorios que se encuentren en la lista.<br>
                Esto se debe hacer cada 10 días para mantener tu hotspot en la lista y es un proceso que no tomará más de 2
                minutos.</p>
            <p>
                Además, puedes dejar un mensaje que se mostrará a los usuarios en la página de visualización de tu hotspot.
            </p>

            <br>
        </div>
        <div class="w-100 text-center"><small><span id="rchars">230</span> Carácter(es) restante(s)</small></div>
        <textarea placeholder="Mensaje" id="mensaje" class="w-100">{{$hotspot['mensaje']}}</textarea>
    </div>
    @if($aleatorio->count() != 0)
        <div class="row d-flex justify-content-center votarContent" style="height: 300px">
            @php $i = 1; @endphp
            @foreach ($aleatorio as $hot)
                <input type="hidden" id="hotspot{{ $i }}" data-hotspot="{{ $hot->hotspot }}"
                    data-nombre="{{ str_replace('-', ' ', $hot->nombre) }}" data-id="{{ $hot->id }}" data-mensaje="{{ $hot->mensaje }}" />
                @php $i++; @endphp
            @endforeach
            <div class="p-5 mb-2 bg-success text-white w-100 text-center">
                <i class="fa fa-heart-o fa-6" style="font-size: 5em;"></i><br>
                <h3 id="h-nombre" class=" text-uppercase"></h3>
                <p id="h-hotspot"></p>
                <p id="h-mensaje"></p>
                <button type="button" id="btn-votar" class="btn btn-white btn-lg btn-block text-uppercase">Votar</button>
                <span class="c" id="20"></span>
            </div>

        </div>
    @else

    @endif
@endsection


@section('scripts')
    <script src="{{ asset('temporizador.js') }}"></script>


    <script type="text/javascript">
        $(document).ready(function() {

            var maxLength = 230;
            $('#rchars').text(maxLength - $('#mensaje').val().length);
            $('#mensaje').keyup(function() {
                var textlen = maxLength - $(this).val().length;
                $('#rchars').text(textlen);
            });

            //TEMPORIZADOR
            function temporizador() {
                $(".c").show();
                var n = $('.c').attr('id');
                var c = n;
                $('.c').text(c);
                setInterval(function() {
                    c--;
                    if (c >= 0) {
                        $('.c').text(c);
                    }

                    //SI EL CONTADOR LLEGA A CERO
                    if (c == 0) {
                        //MUESTRA SIGUIENTE HOTSPOT
                        hotspot_actual = hotspot_actual + 1;

                        //COMPRUEBA SI NO HAY MAS HOTSPOT DISPONIBLES PARA ENVIAR DIRECTAMENTE
                        if($("#hotspot"+hotspot_actual).attr("data-hotspot") == null){
                            $('.c').html("¡Gracias!<br>Espera por favor.");
                            enviar();
                            
                            return true;
                        }

                        var t_hotspot = $("#hotspot" + hotspot_actual).attr("data-hotspot");
                        var t_nombre = $("#hotspot" + hotspot_actual).attr("data-nombre");
                        var t_mensaje = $("#hotspot" + hotspot_actual).attr("data-mensaje");

                        console.log(hotspot_actual+' '+t_nombre+' '+t_hotspot);
                        

                        $("#h-nombre").html(t_nombre);
                        $("#h-hotspot").html(t_hotspot);
                        $("#h-mensaje").html(t_mensaje);
                        $("#btn-votar").show();
                        //OCULTA TEMPORIZADOR
                        $(".c").hide();
                    }
                }, 1000);
            }

            //ENVIAR SOLICITUD
            function enviar(){
                
                    //ENVIA SOLICITUD DE RENOVACION
                    //Crear un objeto con las variables
                    var data = {
                        hotspot1: $("#hotspot1").attr("data-id"),
                        hotspot2: $("#hotspot2").attr("data-id"),
                        hotspot3: $("#hotspot3").attr("data-id"),
                        hotspot4: $("#hotspot4").attr("data-id"),
                        hotspot5: $("#hotspot5").attr("data-id"),
                        mensaje: $("#mensaje").val(),
                        _token: $("meta[name='csrf-token']").attr("content")
                    };

                    //Enviar las variables mediante el método POST a la URL específica
                    $.post("{{ url('renovar') }}", data, function(response) {
                        //Código a ejecutar en caso de éxito
                        console.log("Variables enviadas exitosamente");
                        if(response.result == true){
                            $('.c').html("Hotspot activado con exito.");

                            setTimeout(function(){
                                window.location.href = '{{url("/h/".$hotspot["nombre"])}}';
                            }, 2000);
                            
                        }
                    }).fail(function() {
                        //Código a ejecutar en caso de error
                        console.log("Error al enviar variables.");
                    });
            }

            //OBTIENE HOTSPOT1
            var hotspot_actual = 1;
            var hotspot1 = $("#hotspot1").attr("data-hotspot");
            var hotspot1_nombre = $("#hotspot1").attr("data-nombre");
            var hotspot1_mensaje = $("#hotspot1").attr("data-mensaje");

            console.log(hotspot_actual+' '+hotspot1_nombre+' '+hotspot1);

            $("#h-nombre").html(hotspot1_nombre);
            $("#h-hotspot").html(hotspot1);
            $("#h-mensaje").html(hotspot1_mensaje);

            $("#btn-votar").on("click", function() {
                //OCULTA BOTON DE VOTAR
                $(this).hide();
               
                //SI EL HOTSPOT ACTUAL ES MENOR QUE EL TOTAL
                if (hotspot_actual != 6) {
                    //ABRE PAGINA DE VOTO
                    var win = window.open('https://www.crowdspot.io/hotspots/' + $("#hotspot" +
                        hotspot_actual).attr("data-hotspot"), '_blank');
                    if (win) {
                        //Browser has allowed it to be opened
                        win.focus();
                    } else {
                        //Browser has blocked it
                        alert('Por favor, permite las ventanas emergentes para este sitio web de lo contrario no funcionara completamente.');
                        return false;
                    }

                    //INICIA TEMPORIZADOR
                    temporizador();
                }
                //SI LOS HOTSPOTS FINALIZARON
                else {
                    //ENVIA SOLICITUD
                    $(".c").show();
                    $('.c').html("¡Gracias!<br>Espera por favor.");
                    enviar();
                }


            });








        });
    </script>
@endsection