@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_detalle_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>
                   <h5>Usuario: {{ $usuario->name.' '.$usuario->a_paterno.' '.$usuario->a_materno.' // '.$usuario->perfil }}</h5>
               </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>
           <div class="list">
            @foreach ($visitas as $key => $visita)
                        <div class="row row-inicio lista list_custom ml-0 mr-0">
                <div class="col-4">
                    <p class="m-0 mb-1 texto-obscuro">Pantalla</p>
                    <h6 class="texto-azul nombre text-uppercase">{{ obtener_url($key) }}</h6>
                </div>
                <div class="col-3">
                    <p class="m-0 mb-1 texto-obscuro">No. de visitas</p>
                    <h6 class="texto-azul numero">{{ $contador }}</h6>
                </div>
                <div class="col-5">
                    <p class="m-0 mb-1 texto-obscuro">Tiempo total</p>
                    <h6 class="texto-azul tiempo" data-tiempo="{{ $visita->sum('tiempo') }}"></h6>
                </div>
            </div>
            @endforeach
        </div>
        <h1 id="msg-result" class="d-none">0 resultados</h1>
        <div class="pagination_flex col-12 mt-5">
            <button type="button" class="jPaginateBack"><i class="fa fa-angle-left"></i></button>
            <ul class="pagination"></ul>
            <button type="button" class="jPaginateNext"><i class="fa fa-angle-right"></i></button>
        </div>
        <div class="row botonera-inferior">
            <div class="col-12 p-0 m-0 text-right botonera-formulario">
                <a href="{{ url('visitas') }}" style="margin-right:0" class="btn btn-secundario text-white width-250">Regresar <span><-</span></a>
            </div>
        </div>
        <div class="empty-space-30"></div>
       </div>
    </div>
@endsection

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

        $('.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';
        }

        var userList = new List('visitas_detalle_list', {
            valueNames: [ 'nombre','numero','tiempo'],
            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_detalle", buscador);
        });
    </script>
@endpush