@extends('layouts.app')
@push('css')
    <link rel="stylesheet" href="{{ asset('css/c3/c3.css') }}">
    <style>
        .skf{
            background-size: cover !important;
            background-repeat: no-repeat;
            background-position: top center;
            height: 300px;
            position: relative;
        }
        .skf_title{
            font-family: "SKFSans-Medium";
            color: #fff;
            font-size: 18px;
            line-height: 30px;
            text-align: left;
            position: absolute;
            bottom: 13%;
        }
        .button_login{
            background-color: #073781;
            color: #fff!important;
            font-size: 10px;
            padding: 6px 30px;
            position: absolute;
            bottom: 0;
            right: 0;
            width: 25%;
            text-decoration: none!important;
            cursor: pointer;
        }
        .skf_button{
            width: 65%;
        }
        @media only screen and (max-width: 1200px){
            .skf_button {
                width: 85%;
            }
        }
        @media only screen and (max-width:991px){
            .skf_button {
                width: 50%;
            }
        }
        @media only screen and (max-width: 720px) {
            .button_login {
                width: 40%;
            }
        }
    </style>
@endpush
@section('content')
    <div class="">
        <div class="animate__animated animate__fadeInUp cabecera">
            <h2 class="letter-spacing-4">Dashboard <span id="tiempo"></span></h2>
        </div>
        <div class="empty-space-30"></div>
        <div class="container ml-0 mr-0 pl-0 pr-0 row">
            {{-- DOCUMENTOS --}}
            {{-- <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 ">
                   <div class="col-12">
                       <h3 class="texto-obscuro">Documentos</h3>
                   </div>
               </div>
               <div class="empty-space-30"></div>
               @foreach ($documentos as $documento)
                <div class="row row-inicio lista ml-0 mr-0">
                    <div class="col-4 col-sm-4 col-md-1 col-lg-1 col-xl-1">
                        <img src="{{ asset('imagenes/iconos/icono_pdf.svg') }}" alt="pdf" width="25">
                    </div>
                    <div class="col-4 col-sm-4 col-md-3 col-lg-3 col-xl-3">
                        <p class="m-0 mb-1 texto-obscuro">Manuales</p>
                        <h6 class="texto-azul">{{ $documento->nombre }}</h6>
                    </div>
                    <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                        <p class="m-0 mb-1 texto-obscuro">Descripción</p>
                        <h6 class="texto-azul">{{ $documento->descripcion }}</h6>
                    </div>
                    <div class="col-4 col-sm-4 col-md-1 col-lg-1 col-xl-1">
                        <p class="m-0 mb-1 texto-obscuro">Peso</p>
                        <h6 class="texto-azul">{{ $documento->size }}</h6>
                    </div>
                    <div class="col-4 col-sm-4 col-md-2 col-lg-2 col-xl-2">
                        <p class="m-0 mb-1 texto-obscuro">Fecha de creación</p>
                        <h6 class="texto-azul">{{ $documento->created_at->format('d/M/Y') }}</h6>
                    </div>
                    <div class="col-4 col-sm-4 col-md-1 col-lg-1 col-xl-1">
                        <a onclick="enviar_descarga('documentos',{{ $documento->id }})" download href="{{ asset('files/documentos/'.$documento->id.'/'.$documento->archivo) }}"><img src="{{ asset('imagenes/iconos/icono_descargar.svg') }}" alt="pdf" width="20"></a>
                    </div>
                </div>
               @endforeach
               <div class="empty-space-60"></div>
               <div class="row botonera-inferior">
                   <div class="col-12">
                   <a href="{!! url('documentos') !!}" class="btn btn-principal btn-derecha width-250">Ver todos los documentos <span>-></span></a>
                   </div>
               </div>
           </div> --}}
           {{-- BANNER WCL --}}
           <div class="col-12">
                <div class="row animate__animated animate__fadeInUp tarjetas tarjeta-imagen-horizontal p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5" style="background: linear-gradient(90deg, rgba(7,55, 129, 0.5) 50%, rgba(7,55, 129, 0.5) 50%),url({{ asset('imagenes/backgrounds_plataforma/back_wcl.jpg') }})">
                    <div class="col-12">
                        <div class="row ">
                            <div class="col-12">
                                <h3 class="texto-blanco">WCL</h3>
                            </div>
                        </div>
                        <div class="empty-space-30"></div>
                        <div class="texto-tarjeta">
                            <p class="texto-blanco text-light"><span class="primer-linea">Inicia sesión desde nuestro portal oficial.</span><br /><span class="segunda-linea"></span></p>
                            <h4 class="texto-blanco text-medium"><span class="primer-linea">Accede a nuestras </span><br /><span class="segunda-linea">herramientas dígitales.</span></h4>
                            <div class="empty-space-10"></div>
                        </div>
                    </div>
                    <div class="row botonera-inferior">
                        <div class="col-12">
                            <a target="_blank" href="https://skfsso.skf.com/b0eefa24-295f-4598-ab11-df22bd8b81dd/b2c_1a_skfsso-prod-signup_signin_wcl/oauth2/v2.0/authorize?client_id=96102e93-4c52-4174-a6f0-2f284f9305c2&scope=openid%20profile%20offline_access&redirect_uri=https%3A%2F%2Fwcl.skf.com%2Fauth&client-request-id=78e11de6-822e-4ab5-8b84-6741828a03f5&response_mode=fragment&response_type=code&x-client-SKU=msal.js.browser&x-client-VER=3.5.0&client_info=1&code_challenge=BXvaL6kCNE-SUJN0AoQTn4LhGHMD9OWTzSo9RkR_J1c&code_challenge_method=S256&nonce=3a853b4e-b1a9-4e38-95b1-2b6559a27678&state=eyJpZCI6IjM5YzY4ZTAzLTQ3MWMtNDQwNi1iOTE5LTlhZmIyNTkxNWYwZiIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoicmVkaXJlY3QifX0%3D" class="btn btn-principal btn-derecha width-250">Ir al portal <span>-></span></a>
                        </div>
                    </div>
                </div>
           </div>
           {{-- PRODUCTOS Y CAMPAÑAS --}}
           <!-- <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
                <div class="row animate__animated animate__fadeInUp tarjetas tarjeta-imagen-horizontal p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5" style="background: linear-gradient(90deg, rgba(7,55, 129, 0.3) 50%, rgba(7,55, 129, 0.3) 50%),url({{ asset('imagenes/campanias/'.$foto_campania->imagen) }})">
                    <div class="col-12">
                        <div class="row ">
                            <div class="col-12">
                                <h3 class="texto-blanco">Campañas</h3>
                            </div>
                        </div>
                        <div class="empty-space-30"></div>
                        <div class="texto-tarjeta">
                            <p class="texto-blanco text-light"><span class="primer-linea">En SKF queremos que disfrutes de una experiencia completa</span><br /><span class="segunda-linea"></span></p>
                            <h4 class="texto-blanco text-medium"><span class="primer-linea">Aquí podrás encontrar las últimas</span><br /><span class="segunda-linea">campañas que hemos pensado para ti</span></h4>
                            <div class="empty-space-10"></div>
                        </div>
                    </div>
                    <div class="row botonera-inferior">
                        <div class="col-12">
                            <a href="{{ url('campanias') }}" class="btn btn-principal btn-derecha width-250">Ver más campañas <span>-></span></a>
                        </div>
                    </div>
                </div>
           </div> -->
           {{-- NOTICIAS --}}
           <div class="col-12 col-sm-12 col-md-12 col-lg-12  col-12">
                <div class="row animate__animated animate__fadeInUp tarjetas tarjeta-imagen-vertical p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5 h-100" style="background: linear-gradient(90deg, rgba(7,55, 129, 0.3) 50%, rgba(7,55, 129, 0.3) 50%),url({{ asset('imagenes/noticias/noticia_'.$foto_noticia->id.'/'.$foto_noticia->imagen) }})">
                    <div class="col-12">
                        <div class="row ">
                            <div class="col-12">
                                <h3 class="texto-blanco">Comunicados</h3>
                            </div>
                        </div>
                        <div class="empty-space-30"></div>
                        <div class="texto-tarjeta">
                            <p class="texto-blanco text-light"><span class="primer-linea">Entérate de los últimos avances y desarrollos</span><br /><span class="segunda-linea"></span></p>
                            <h4 class="texto-blanco text-medium"><span class="primer-linea">Esta sección te ayudará a</span> <span class="segunda-linea">estar siempre al día</span></h4>
                            <div class="empty-space-10"></div>
                        </div>
                    </div>
                    <div class="row botonera-inferior">
                        <div class="col-12">
                            <a href="{{ url('noticias') }}" class="btn btn-principal btn-derecha width-250">Ver más comunicados <span>-></span></a>
                        </div>
                    </div>
                </div>
           </div>
           {{-- CURSOS --}}
           <div class="col-12">
                <div class="row animate__animated animate__fadeInUp tarjetas tarjeta-imagen-horizontal p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5" style="background: linear-gradient(90deg, rgba(7,55, 129, 0.5) 50%, rgba(7,55, 129, 0.5) 50%),url({{ asset('files/cursos/'.$foto_curso->id.'/'.$foto_curso->imagen) }})">
                    <div class="col-12">
                        <div class="row ">
                            <div class="col-12">
                                <h3 class="texto-blanco">Cursos</h3>
                            </div>
                        </div>
                        <div class="empty-space-30"></div>
                        <div class="texto-tarjeta">
                            <p class="texto-blanco text-light"><span class="primer-linea">Los cursos de formación de SKF se basan en más</span><br /><span class="segunda-linea">de 100 años de experiencia y conocimiento.</span></p>
                            <h4 class="texto-blanco text-medium"><span class="primer-linea">Conoce nuestra gama de</span><br /><span class="segunda-linea">cursos y capacitación continua.</span></h4>
                            <div class="empty-space-10"></div>
                        </div>
                    </div>
                    <div class="row botonera-inferior">
                        <div class="col-12">
                            <a href="{{ url('cursos') }}" class="btn btn-principal btn-derecha width-250">Ver más cursos <span>-></span></a>
                        </div>
                    </div>
                </div>
           </div>
           {{-- SOLUTION FACTORY --}}
           {{-- <div class="col-12">
                <div class="row animate__animated animate__fadeInUp tarjetas tarjeta-imagen-horizontal p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5" style="background: linear-gradient(90deg, rgba(7,55, 129, 0.5) 50%, rgba(7,55, 129, 0.5) 50%),url({{ asset('imagenes/solution_factory.jpg') }})">
                    <div class="col-12">
                        <div class="row ">
                            <div class="col-12">
                                <h3 class="texto-blanco">Reparaciones</h3>
                            </div>
                        </div>
                        <div class="empty-space-30"></div>
                        <div class="texto-tarjeta">
                            <h4 class="texto-blanco text-medium"><span class="primer-linea">Accede a nuestros servicios de</span><br /><span class="segunda-linea">calibración y reparación de equipos.</span></h4>
                            <div class="empty-space-10"></div>
                        </div>
                    </div>
                    <div class="row botonera-inferior">
                        <div class="col-12">
                            <a target="_blank" href="https://solutionfactory.skfdistributors.mx/" class="btn btn-principal btn-derecha width-250">Visitar Solution Factory <span>-></span></a>
                        </div>
                    </div>
                </div>
            </div> --}}
           {{-- CATÁLOGOS --}}
           {{-- <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 ">
                    <div class="col-12">
                        <h3 class="texto-obscuro">Catálogos</h3>
                    </div>
                </div>
                <div class="empty-space-30"></div>
                @foreach ($catalogos as $catalogo)
                    <div class="row row-inicio lista ml-0 mr-0">
                        <div class="col-4 col-sm-4 col-md-1 col-lg-1 col-xl-1">
                            <img src="{{ asset('imagenes/iconos/icono_pdf.svg') }}" alt="pdf" width="25">
                        </div>
                        <div class="col-4 col-sm-4 col-md-3 col-lg-3 col-xl-3">
                            <p class="m-0 mb-1 texto-obscuro">Consultoría</p>
                            <h6 class="texto-azul">{{ $catalogo->nombre }}</h6>
                        </div>
                        <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                            <p class="m-0 mb-1 texto-obscuro">Descripción</p>
                            <h6 class="texto-azul">{{ $catalogo->descripcion }}</h6>
                        </div>
                        <div class="col-4 col-sm-4 col-md-1 col-lg-1 col-xl-1">
                            <p class="m-0 mb-1 texto-obscuro">Peso</p>
                            <h6 class="texto-azul">{{ $catalogo->size }}</h6>
                        </div>
                        <div class="col-4 col-sm-4 col-md-2 col-lg-2 col-xl-2">
                            <p class="m-0 mb-1 texto-obscuro">Fecha de creación</p>
                            <h6 class="texto-azul">{{ $catalogo->created_at->format('d/M/Y') }}</h6>
                        </div>
                        <div class="col-4 col-sm-4 col-md-1 col-lg-1 col-xl-1">
                            <a onclick="enviar_descarga('catalogos',{{ $catalogo->id }})" download href="{{ asset('files/catalogos/'.$catalogo->id.'/'.$catalogo->archivo) }}"><img src="{{ asset('imagenes/iconos/icono_descargar.svg') }}" alt="pdf" width="20"></a>
                        </div>
                    </div>
                @endforeach
                <div class="empty-space-60"></div>
                <div class="row botonera-inferior">
                    <div class="col-12">
                        <a href="{{ url('catalogos') }}" class="btn btn-principal btn-derecha width-250">Ver todos los catálogos <span>-></span></a>
                    </div>
                </div>
            </div> --}}
            {{-- AVISOS --}}
            <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 ">
                    <div class="col-12">
                        <h3 class="texto-obscuro">Avisos</h3>
                    </div>
                </div>
                <div class="empty-space-30"></div>
                @foreach ($avisos as $aviso)
                    <div class="row row-inicio lista ml-0 mr-0">
                        <div class="col-4">
                            <p class="m-0 mb-1 texto-obscuro">Título</p>
                            <h6 class="texto-azul document_name">{{ $aviso->nombre }}</h6>
                        </div>
                        <div class="col-5">
                            <p class="m-0 mb-1 texto-obscuro">Descripción</p>
                            <h6 class="texto-azul">{{ Str::limit( $aviso->descripcion, 100, '...') }}</h6>
                        </div>
                        <div class="col-3">
                            <p class="m-0 mb-1 texto-obscuro">Tipo de aviso</p>
                            <h6 class="texto-azul">{{ $aviso->tipo_aviso }}</h6>
                        </div>
                    </div>
                @endforeach
                <div class="empty-space-60"></div>
                <div class="row botonera-inferior">
                    <div class="col-12">
                        <a href="{{ url('avisos') }}" class="btn btn-principal btn-derecha width-250">Ver todos los avisos <span>-></span></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="animate__animated animate__fadeInUp container tarjetas tarjeta-blanca col-12">
            <div class="row">
                <div class="col-xl col-md col-sm skf" style="background-image: url({{ asset('imagenes/imagenes_landing/skf_01.jpg') }})">
                    <p class="skf_title">
                        SKF México
                    </p>
                    <a href="https://www.skf.com/mx" class="button_login skf_button">
                        SABER MÁS
                        <span class="icon">-></span>
                    </a>
                </div>
                <div class="col-xl col-md col-sm skf" style="background-image: url({{ asset('imagenes/imagenes_landing/skf_02.jpg') }})">
                    <p class="skf_title">
                        SKF Tutoriales
                    </p>
                    <a href="https://skftutoriales.mx/" class="button_login skf_button">
                        SABER MÁS
                        <span class="icon">-></span>
                    </a>
                </div>
                <div class="col-xl col-md col-sm skf" style="background-image: url({{ asset('imagenes/imagenes_landing/skf_03.jpg') }})">
                    <p class="skf_title">
                        SKF Entrenamientos
                    </p>
                    <a href="https://www.skfentrenamientos.mx/" class="button_login skf_button">
                        SABER MÁS
                        <span class="icon">-></span>
                    </a>
                </div>
                {{-- <div class="col-xl col-md col-sm skf" style="background-image: url({{ asset('imagenes/imagenes_landing/skf_04.jpg') }})">
                    <p class="skf_title">
                        e-Commerce SKF
                    </p>
                    <a href="https://skfoficial.com.mx/inicio/" class="button_login skf_button">
                        SABER MÁS
                        <span class="icon">-></span>
                    </a>
                </div> --}}
                <div class="col-xl col-md col-sm skf" style="background: linear-gradient(90deg, rgba(7,55, 129, 0.3) 50%, rgba(7,55, 129, 0.3) 50%),url({{ asset('imagenes/imagenes_landing/skf_05.png') }})">
                    <p class="skf_title">
                        SKF College
                    </p>
                    <a href="https://skfcollege.com.mx/" class="button_login skf_button">
                        SABER MÁS
                        <span class="icon">-></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('scripts')
    <script>
        function enviar_descarga(documento_id,seccion)
            {
                var data = {
                    "user_id": "{{ get_perfil()['id'] }}",
                    "seccion": seccion,
                    "archivo_id":documento_id,
                }
                $.ajax({
                    url: "{{ URL('/') }}/api/agregar_descarga",
                    type: "POST",
                    dataType: "json",
                    data: data,
                    success: function(respuesta) {
                    },
                    error: function() {
                    }
                });
            }
    </script>
@endpush