@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="descargas_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 ($usuario->descargas->sortByDesc('created_at') as $key => $descarga)
            {{-- @dd($key,$descarga) --}}
                @if($descarga->seccion == "documentos")
                    <div class="row row-inicio lista list_custom ml-0 mr-0">
                        <div class="col-2">
                            <p class="m-0 mb-1 texto-obscuro">Sección</p>
                            <h6 class="texto-azul nombre text-uppercase">Documentos</h6>
                        </div>
                        <div class="col-3">
                            <p class="m-0 mb-1 texto-obscuro">Nombre</p>
                            <h6 class="texto-azul numero">{{ $descarga->documento->nombre }}</h6>
                        </div>
                        <div class="col-5">
                            <p class="m-0 mb-1 texto-obscuro">Archivo</p>
                            <a class="enlace-comun texto-azul" download href="{{ asset('files/documentos/'.$descarga->documento->id.'/'.$descarga->documento->archivo) }}">{{ $descarga->documento->nombre }}</a>
                        </div>
                        <div class="col-2">
                            <p class="m-0 mb-1 texto-obscuro">Fecha de descarga</p>
                            <h6 class="texto-azul fecha">{{ $descarga->created_at->format('d/M/Y h:i A') }}</h6>
                        </div>
                    </div>
                @elseif($descarga->seccion == "catalogos")
                    <div class="row row-inicio lista list_custom ml-0 mr-0">
                        <div class="col-2">
                            <p class="m-0 mb-1 texto-obscuro">Sección</p>
                            <h6 class="texto-azul nombre text-uppercase">Catálogos</h6>
                        </div>
                        <div class="col-3">
                            <p class="m-0 mb-1 texto-obscuro">Nombre</p>
                            <h6 class="texto-azul numero">{{ $descarga->catalogo->nombre }}</h6>
                        </div>
                        <div class="col-5">
                            <p class="m-0 mb-1 texto-obscuro">Archivo</p>
                            <a class="enlace-comun texto-azul" download href="{{ asset('files/catalogos/'.$descarga->catalogo->id.'/'.$descarga->catalogo->archivo) }}">{{ $descarga->catalogo->nombre }}</a>
                        </div>
                        <div class="col-2">
                            <p class="m-0 mb-1 texto-obscuro">Fecha de descarga</p>
                            <h6 class="texto-azul fecha">{{ $descarga->created_at->format('d/M/Y h:i A') }}</h6>
                        </div>
                    </div>
                @elseif($descarga->seccion == "campanias")
                    <div class="row row-inicio lista list_custom ml-0 mr-0">
                        <div class="col-2">
                            <p class="m-0 mb-1 texto-obscuro">Sección</p>
                            <h6 class="texto-azul nombre text-uppercase">Campañas</h6>
                        </div>
                        <div class="col-3">
                            <p class="m-0 mb-1 texto-obscuro">Nombre</p>
                            <h6 class="texto-azul numero">{{ $descarga->campania->nombre }}</h6>
                        </div>
                        <div class="col-5">
                            <p class="m-0 mb-1 texto-obscuro">Archivo</p>
                            <a href="{{ asset('files/campanias/campania_'.$descarga->campania->id.'/'.$descarga->campania->materialCampanias->where('id',$descarga->archivo_id)->first()->nombre) }}" download class="enlace-comun texto-azul">{{ $descarga->campania->materialCampanias->where('id',$descarga->archivo_id)->first()->nombre }}</a>
                        </div>
                        <div class="col-2">
                            <p class="m-0 mb-1 texto-obscuro">Fecha de descarga</p>
                            <h6 class="texto-azul fecha">{{ $descarga->created_at->format('d/M/Y h:i A') }}</h6>
                        </div>
                    </div>
                @elseif($descarga->seccion == "cursos")
                    <div class="row row-inicio lista list_custom ml-0 mr-0">
                        <div class="col-2">
                            <p class="m-0 mb-1 texto-obscuro">Sección</p>
                            <h6 class="texto-azul nombre text-uppercase">Cursos</h6>
                        </div>
                        <div class="col-3">
                            <p class="m-0 mb-1 texto-obscuro">Nombre</p>
                            <h6 class="texto-azul numero">{{ $descarga->curso->nombre }}</h6>
                        </div>
                        <div class="col-5">
                            <p class="m-0 mb-1 texto-obscuro">Archivo</p>
                            <a class="enlace-comun texto-azul" href="{{ asset('files/cursos/'.$descarga->curso->id.'/'.$descarga->curso->materialCursos->where('id',$descarga->archivo_id)->first()->materiales->nombre) }}" download>{{ $descarga->curso->materialCursos->where('id',$descarga->archivo_id)->first()->materiales->nombre }}</a>
                        </div>
                        <div class="col-2">
                            <p class="m-0 mb-1 texto-obscuro">Fecha de descarga</p>
                            <h6 class="texto-azul fecha">{{ $descarga->created_at->format('d/M/Y h:i A') }}</h6>
                        </div>
                    </div>
                @endif
            @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('descargas') }}" 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>
        var userList = new List('descargas_detalle_list', {
            valueNames: [ 'nombre','numero','tiempo','fecha'],
            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');
                    }
                })
            });

            $('.jPaginateBack').on('click', function(){
                var list = $('.pagination').find('li');
                $.each(list, function(position, element){
                    if($(element).is('.active')){
                        $(list[position-1]).trigger('click');
                    }
                })
            });
        }

        $(".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