@extends('master.principal')
@section('header')
<title> Servicios Postventa | {{ config('vw.name') }} </title>
<style>
    p.card-text.content-section {
        min-height: 140px;
    }

    .serv-grid {
        width: 100%;
        max-width: 1240px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, 2fr);
        /* Fuerza 5 columnas */
        grid-gap: 1rem;
    }


    p.card-text.content-section {
        padding-bottom: 1em;
    }
</style>
@endsection
@section('content')
<div id="headerBreadcrumb" class="header__breadcrumb absolute" style="top: 98px;">
    <a href="{{ route('inicio') }}">inicio</a> / <a href="{{ route('servicios') }}">Servicio Postventa</a>
</div>
<div style="z-index: 3; position: relative">
    <div class="truckContainer">
        <div class="bigTitle--container">
            <span>
                <h3 class="projectTitle">Servicios Postventa</h3>
            </span>
        </div>
        <div class="serv-grid">


            <!-- Repuestos originales -->

            <span class="">
                <div>
                    <div class="truckCard card card-border">
                        <h6 class="card-title subtitle-section">Repuestos originales</h6>
                        <img src="{{ asset('assets/front/img/repuestos.webp') }}"
                            data-src="{{ asset('assets/front/img/repuestos.webp') }}" class="card-img-top lazy"
                            style="height:auto; width:270px;">
                        <div class="card-body body-card">

                        </div>
                        <div style="height: 1.875rem"></div>
                    </div>
                    <div class="button-card-container">
                        <div class="button-card">
                            <a href="{{route('repuestos')}}" class="pt-3 btn btn-secondary" tabindex="0">
                                <span>Más Información</span>
                            </a>

                        </div>
                    </div>
                </div>
            </span>

              <!-- Mantenimiento -->

            <span>
                <div>
                    <div class="truckCard card card-border">
                        <h6 class="card-title subtitle-section">Servicios de mantenimiento</h6>
                        <img src="{{ asset('assets/front/img/mantenimiento_ext.jpeg') }}"
                            data-src="{{ asset('assets/front/img/mantenimiento_ext.jpeg') }}"
                            class="card-img-top lazy" style="height:auto; width:270px;">
                        <div class="card-body body-card">

                        </div>

                        <div style="height: 1.875rem"></div>
                    </div>
                    <div class="button-card-container">
                        <div class="button-card">
                            <a href="{{ route('mantenimiento') }}" class="pt-3 btn btn-secondary" tabindex="0">
                                <span>Más Información</span>
                            </a>
                        </div>
                    </div>
                </div>
            </span>

         

            
            <!-- Repuestos originales -->

            <!-- Servicios de Mantenimiento -->

            <span class="">
                <div>
                    <div class="truckCard card card-border">
                        <h6 class="card-title subtitle-section" style="font-size: 20px !important;">Garantía</h6>
                        <img src="{{ asset('assets/front/img/repuestos_ext2.webp') }}"
                            data-src="{{ asset('assets/front/img/repuestos_ext2.webp') }}" class="card-img-top lazy"
                            style="height:auto; width:270px;">
                        <div class="card-body body-card">

                        </div>
                        <div style="height: 1.875rem"></div>
                    </div>
                    <div class="button-card-container">
                        <div class="button-card">
                            <a href="{{route('garantia')}}" class="pt-3 btn btn-secondary" tabindex="0">
                                <span>Más Información</span>
                            </a>
                        </div>
                    </div>
                </div>
            </span>

        </div>
    </div>
</div>
</div>
</div>



<!-- NEWS -->

<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(6) 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($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>
    $('.truckNewsSlider').slick({
        dots: false,
        infinite: false,
        arrows: false,
        speed: 300,
        slidesToShow: 3,
        slidesToScroll: 3,
        responsive: [{
            breakpoint: 992,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1,
                dots: true,
            }
        }, {
            breakpoint: 576,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                dots: true,
            }
        }]
    });
</script>
@endsection