@extends('layouts.app')


@push('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css">
@endpush

@section('content')
    <div class="container ml-0 mr-0 pl-0 pr-0 row" id="visitas_list">
        <div class="animate__animated animate__fadeInUp container tarjetas tarjeta-gris p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5 col-12">
            <div class="row row-bottom">
               <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
                   <h3 class="titulo-modulo texto-obscuro">Visitas</h3>
               </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                    <nav class="breadcrumb"><a class="breadcrumb-item" href="{{ url('home') }}">Dashboard</a><span class="breadcrumb-item active">Visitas</span></nav>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                    <input type="text" class="search input_main input_buscador float-right" placeholder="Buscar...">
                </div>
           </div>
           <div class="empty-space-10"></div>
            @include('visitas.table')
           <div class="empty-space-30"></div>
       </div>
       <div class="animate__animated animate__fadeInUp container tarjetas tarjeta-blanca p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5 col-12">
            <div class="row row-bottom">
                <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
                    <h3 class="titulo-modulo texto-obscuro">Pantallas más visitadas</h3>
                </div>
            </div>
            <div class="empty-space-10"></div>
            <div class="row row-inicio">
                @foreach ($tres_visitas as $key => $visita)
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                        <h5 class="titulo-modulo texto-obscuro text-uppercase">{{ obtener_url($key) }}</h5>
                        <h5 class="tiempo" data-tiempo="{{ $visita[0] }}"></h5>
                        <h5>Visitas: <span>{{ $visita[1] }}</span></h5>
                    </div>
                @endforeach
            </div>
            <div class="empty-space-50"></div>
            <div class="row botonera-inferior">
                <div class="col-12 p-0 m-0 text-right botonera-formulario">
                    <a href="{{ url('visitas/pantallas') }}" class="btn btn-principal text-white width-250">Ver más <span>-></span></a>
                </div>
            </div>
       </div>
   </div>
@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
    <script>

        $(document).ready(function() {
            @if($validar_vista)
            localStorage.setItem("buscador_visitas", '');
            @endif

            $(".input_buscador").val(localStorage.getItem("buscador_visitas"));
            userList.search(localStorage.getItem("buscador_visitas"));
            if(userList.search(localStorage.getItem("buscador_visitas")) == 0)
            {
                $("#msg-result").removeClass('d-none');
            }

            // listObj.sort('name', { order: "asc" }); // Sorts the list in abc-order based on names
        });

        $(".btn-acciones").click(function(){
            $(".menu-acciones-lista").hide();
            $(this).next().slideDown("fast");
        });
        $(".btn-cerrar-acciones").click(function(){
            $(this).parent().slideUp("fast");
        });
        var userList = new List('visitas_list', {
            valueNames: [ 'nombre','email','perfil'],
            page: 6,
            pagination: {
                innerWindow: 2,
                left: 0,
                right: 0,
                paginationClass: "pagination",
            }
        });
        var length_lis = $('.list .list_custom').length;
        if(length_lis == 0){
            $('.jPaginateNext').css('display','none');
            $('.jPaginateBack').css('display','none');
        }
        else{
            $('.jPaginateNext').css('display','block');
            $('.jPaginateBack').css('display','block');
            $('.jPaginateNext').on('click', function(){
                var list = $('.pagination').find('li');
                $.each(list, function(position, element){
                    if($(element).is('.active')){
                        $(list[position+1]).trigger('click');
                    }
                })
                $('.tiempo').each(function(index, value) {
                    var elemento = $(this);
                    var tiempo = secondsToString(elemento.data('tiempo'));
                    elemento.text(tiempo);
                });
            });

            $('.jPaginateBack').on('click', function(){
                var list = $('.pagination').find('li');
                $.each(list, function(position, element){
                    if($(element).is('.active')){
                        $(list[position-1]).trigger('click');
                    }
                })
                $('.tiempo').each(function(index, value) {
                    var elemento = $(this);
                    var tiempo = secondsToString(elemento.data('tiempo'));
                    elemento.text(tiempo);
                });
            });
        }

        $(".pagination").click(function(){
            $('.tiempo').each(function(index, value) {
                var elemento = $(this);
                var tiempo = secondsToString(elemento.data('tiempo'));
                elemento.text(tiempo);
            });
        })

        $(".input_buscador").keyup(function(){
            if($('.list .list_custom').length == 0)
            {
                $("#msg-result").removeClass('d-none');
            }else{
                $("#msg-result").addClass('d-none');
            }
            var buscador = $(".input_buscador").val();
            localStorage.setItem("buscador_visitas", buscador);
        });

        @foreach (session('flash_notification', collect())->toArray() as $message)
            @if($message["level"] == "success")
            toastr.success('{{ $message["message"] }}', {timeOut: 1000000})
            @else
            toastr.error('{{ $message["message"] }}', {timeOut: 10000})
            @endif
            {{ session()->forget('flash_notification') }}
        @endforeach


        $('.tiempo').each(function(index, value) {
            var elemento = $(this);
            var tiempo = secondsToString(elemento.data('tiempo'));
            elemento.text(tiempo);
        });
        function secondsToString(seconds) {
            var hour = Math.floor(seconds / 3600);
            hour = (hour < 10)? '0' + hour : hour;
            var minute = Math.floor((seconds / 60) % 60);
            minute = (minute < 10)? '0' + minute : minute;
            var second = seconds % 60;
            second = (second < 10)? '0' + second : second;
            return hour + ' horas, ' + minute + ' minutos, ' + second+' segundos';
        }
    </script>
@endpush