@extends('layouts.app')
@push('css')
    <link rel="stylesheet" href="{{ asset('css/c3/c3.css') }}">
@endpush
@section('content')
    <div class="">
        <div class="animate__animated animate__fadeInUp cabecera">
            <h2 class="letter-spacing-4">Dashboard </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 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>
           {{-- 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-image: url({{ asset('imagenes/backgrounds_plataforma/back_campanias.jpg') }})">
                    <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-4 col-lg-4  col-4">
                <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-image: url({{ asset('imagenes/backgrounds_plataforma/back_noticias.jpg') }})">
                    <div class="col-12">
                        <div class="row ">
                            <div class="col-12">
                                <h3 class="texto-blanco">Noticias</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><br /><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 noticias <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-image: url({{ asset('imagenes/backgrounds_plataforma/back_cursos.jpg') }})">
                    <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>

            {{-- 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 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>
        </div>
    </div>
@endsection


@push('scripts')
    <script src="{{ asset('js/c3/c3.js') }}"></script>
    <script src="{{ asset('js/c3/d3.v5.js') }}"></script>
    <script>
        $( document ).ready(function() {
            var chart = c3.generate({
                bindto: '#chart',
                data: {
                    columns: [
                        ['Total', {{ $productos_5 }}, {{ $productos_4 }}, {{ $productos_3 }}, {{ $productos_2 }}, {{ $productos_1 }},{{ $productos_0 }}],
                    ],
                    type: 'bar'
                },
                bar: {
                    width: {
                        ratio: 0.7
                    }
                },
                legend: {
                   show: false
                },
                color: {
                    pattern: ['#0b5cd7']
                },
                axis: {
                    x: {
                        label: {
                            text: 'No. de productos solicitados en los últimos 6 meses',
                            position: 'outer-center',
                        },
                        type: 'category',
                        categories: ["{{ $mes_5 }}", '{{ $mes_4 }}', '{{ $mes_3 }}', '{{ $mes_2 }}', '{{ $mes_1 }}','{{ $mes_0 }}'],
                        tick: {
                        centered: true
                        },
                        height: 50,
                        fill: 'red'
                    },
                    y: {
                        label: {
                        text: 'No. Pedidos',
                        position: 'outer-middle'
                        },
                        max: {{ $variable_mayor }},
                        tick: {
                            format: function (d) {
                                return (parseInt(d) == d) ? d : null;
                            }
                        },
                        min: 0,
                        padding: {
                            top: 0,
                            bottom: 0
                        },
                        height: 50,
                    }
                },
                size: {
                    height: 200
                }
            });
        });
    </script>
@endpush