@extends('master.principal')
@section('content')
    <div id="headerBreadcrumb" class="header__breadcrumb absolute" style="top: 98px;">
        <a href="{{ route('inicio') }}">inicio</a> / <a href="{{ route('modelos') }}">Modelos</a>
    </div>

    @include('includes/modelos-slide')

    <!-- NEWS -->

    <style>
        .truckNewsSlider {
            width: 100%;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap: 1rem;

        }

        @media only screen and (max-width:991px) {
            .truckNewsSlider {
                grid-template-columns: 1fr 1fr;
            }

            @media only screen and (max-width:591px) {
                .truckNewsSlider {
                    grid-template-columns: 1fr;
                }
    </style>

    <div class="truckNewsBackground"
        style="background:url(/assets/front/img/img-background.png) center center no-repeat; background-size: cover !important;">

        <div class="truckNewsContainer">
            <div class="bigTitle--container">
                <span>
                    <h3 class="projectTitle">Últimas Noticias</h3>
                </span>
            </div>
            <div class="truckNewsSliderContainer">
                <div class="truckNewsSlider">

                    @foreach (App\Noticia::noticiasPublicas(3) as $noticia)
                        <span>
                            <div>
                                <div class="newsTruckCard card card-border">
                                    @if (isset($noticia) && $noticia->imagen != null)
                                        <img src="{{ asset('storage/noticias/' . $noticia->id . '/' . $noticia->imagen) }}"
                                            class="img-fluid" alt="">
                                    @else
                                        <img class="card-img-top lazy" src="/assets/front/img/placeholder-img-medium.png"
                                            data-src="/assets/front/img/noticia-thumbnail.jpeg">
                                    @endif

                                    <div class="card-body body-card">
                                        <h5 class="card-title subtitle-section">{{ $noticia->titulo }}</h5>
                                        <p class="card-text content-section">
                                            {!! str_limit(strip_tags(html_entity_decode($noticia->texto)), 150) !!}</p>
                                    </div>
                                </div>
                                <div class="button-card-container">
                                    <div class="button-card news-truck-card-button">
                                        <a class="btn btn-secondary" href="{{ route('novedad', $noticia->id) }}">
                                            <h5 class="p-2">Leer más</h5>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </span>
                    @endforeach

                </div>
                <div class="row justify-content-center titleContainer">
                    <a href="{{ route('novedades') }}" style="text-decoration: none;">
                        <p class="dividers" style="color: #ffffff;">VER TODAS LAS NOTÍCIAS</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script type="text/javascript">
        $('.truckSlider').slick({
            dots: false,
            infinite: false,
            arrows: false,
            speed: 300,
            slidesToShow: 4,
            slidesToScroll: 4,
            responsive: [{
                    breakpoint: 992,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1,
                        dots: true,
                    }
                },
                {
                    breakpoint: 576,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        dots: true,
                    }
                }
            ]
        });
    </script>
@endsection