@extends('master.principal')
@section('header')
    <link rel="stylesheet" href="{{ asset('assets/front/css/details.css') }}">
@endsection
@section('content')
    <span id="headerOverview" class="header__overview">
        <div class="overview-menu">
            <script type="text/javascript">
                function autoScroll(id) {
                    $('html,body').animate({
                        scrollTop: $(id).offset().top + (-40)
                    }, 'slow');
                }
            </script>
            <div class="container d-lg-inline-block d-none">
                <nav class="navbar navbar-inverse">
                    <ul class="nav navbar-nav">
                        <li class="nav-item">
                            <a id="linkOverview" onclick="autoScroll('#sectionOverview')" href="#">Visión General</a>
                        </li>
                        <li class="nav-item">
                            <a id="linkFeatures" onclick="autoScroll('#sectionFeatures')" href="#">Atributos</a>
                        </li>
                        <li class="nav-item">
                            <a id="linkDescription" onclick="autoScroll('#sectionDescription')" href="#">Descripción
                            </a>
                        </li>
                        <li class="nav-item">
                            <a id="linkGallery" onclick="autoScroll('#sectionGallery')" href="#">Galería</a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!-- <div class="button-right">
                          <button type="" class="btn btn-secondary" onclick="#">
                            <span>Estoy interesado</span>
                          </button>
                        </div> -->

            <div class="dropdown d-lg-none d-xs-none" style="justify-content: left;">
                <a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                    Selecione
                    <img src="{{ asset('assets/front/img/arrow-down.png') }}">
                </a>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" onclick="autoScroll('#sectionOverview')" href="#">Visión General</a>
                    <a class="dropdown-item" onclick="autoScroll('#sectionFeatures')" href="#">Atributos</a>
                    <a class="dropdown-item" onclick="autoScroll('#sectionDescription')" href="#">Descripción </a>
                    <a class="dropdown-item" onclick="autoScroll('#sectionGallery')" href="#">Galería</a>
                </div>
            </div>

        </div>
    </span>

    <div id="overviewContainer" style="height: 0px;"></div>

    <div id="headerBreadcrumb" class="header__breadcrumb absolute" style="top: 0;">
        <a href="{{ route('inicio') }}">inicio</a> / <a href="{{ route('modelos') }}">Modelos</a> / <a
            href="{{ route($modelo->categoria->slug) }}">{{ $modelo->categoria->nombre }}</a> / {{ $modelo->nombre }}
    </div>

    <!--  features  -->

    <div id="sectionOverview">
        <span class="banner--deals">
            <div class="newsContainer row align-items-center justify-content-between">
                <div class="col-12 col-lg-6 content-section contentContainer">
                    <div class="sectionTitle">

                        <div>
                            <span>
                                <span>Visión General</span>
                            </span>
                            <div class="yellowBorder"></div>
                        </div>
                        <div class="title">
                            <span>{{ $modelo->nombre }}</span>
                        </div>
                    </div>
                    <div class="col-12 p-0 techinfo--description">{{ $modelo->descripcion }}</div>

                    <div class="col-lg-3 img-truck d-md-block d-lg-none">

                        <img class="img-fluid red-delivery"
                            src="{{ asset('storage/modelo/' . $modelo->id . '/' . $modelo->imagen) }}">
                    </div>

                    <div class="col-lg-2 p-0 justify-content-center d-none d-lg-block">
                        <div class="buy-truck">
                            <button type="" class="btn btn-secondary"
                                onclick="window.location.href='{{ route('contacto') }}?ref={!! str_replace(' ', '-', $modelo->nombre) !!}';">
                                <span>Estoy interesado</span>
                            </button>
                        </div>
                    </div>

                    <div class="col-12 col-md-10 col-lg-12 offset-0 offset-md-1 offset-lg-0 truck-description-align">
                        <div class="row d-flex truck-description">
                            <div class="col-6 col-sm truck">
                                <div class="content-section intern-product">Motor</div>
                                <span>{{ $modelo->motor }}</span>
                            </div>
                            <div class="col-6 col-sm truck">
                                <div class="content-section intern-product">Potencia - CV (Kw) a rpm</div>
                                <span>{{ $modelo->potencia }}</span>
                            </div>
                            <div class="col-6 col-sm truck">
                                <div class="content-section intern-product">Par Motor - Nm a rpm</div>
                                <span>{{ $modelo->torque }}</span>
                            </div>
                            @if ($modelo->categoria_id != 5)
                                <div class="col-6 col-sm truck">
                                    <div class="content-section intern-product">Transmisión</div>
                                    <span>{{ $modelo->transmision }}</span>
                                </div>
                            @endif
                            <div class="col-6 col-sm truck">
                                <div class="content-section intern-product">Capacidad Técnica Total</div>
                                <span>{{ $modelo->peso }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="col d-md-block d-lg-none">
                        <div class="row button-md justify-content-center" style="margin: 0">
                            <div class="buy-truck">
                                <button type="" class="btn btn-secondary"
                                    onclick="window.location.href='{{ route('contacto') }}?ref={!! str_replace(' ', '-', $modelo->nombre) !!}';">
                                    <span>Estoy interesado</span>
                                </button>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-lg-6 img-truck d-none d-lg-block">
                    @if ($modelo->info)
                        <a href="{{ route('plan-mi-camion-vw') }}">
                            <img src="{{ asset('img/iso-mi-camion.webp') }}" width="200" alt="Plan Mi Camion VW"
                                style="padding-right:3rem">
                        </a>
                    @endif
                    <img class="img-fluid red-delivery"
                        src="{{ asset('storage/modelo/' . $modelo->id . '/' . $modelo->imagen) }}">
                </div>
            </div>
        </span>
    </div>

    <div id="sectionFeatures">

        <div class="news">
            <span>
                <div class="sectionTitle">
                    <div>
                        <span>
                            <span>Atributos</span>
                        </span>
                        <div class="yellowBorder"></div>
                    </div>
                    <div class="title">
                        <span>Conoce más</span><br>
                        <span>sobre esta unidad</span>
                    </div>
                </div>
            </span>

            <div class="newsContainer">

                <!-- condicional para que no muestre modulos vacios -->
                @if ($modelo->texto_1 != '')
                    <div class="row content__container align-items-center ">

                        <div class="col-12 col-lg-6 content-first-column p-0">
                            <img src="{{ asset('assets/front/img/placeholder-img-medium.png') }}"
                                data-src="{{ asset('storage/modelo/' . $modelo->id . '/' . $modelo->foto_1) }}"
                                class="img-truck lazy">
                        </div>
                        <div class="col-12 col-lg-6 content-second-column p-0">
                            <div class="second-column__container mt-5 mt-0-lg">
                                <p class="subtitle-section column">
                                    <label>{{ $modelo->titulo_1 }}</label>
                                </p>
                                <p class="content-section column">
                                    <label>{{ $modelo->texto_1 }}</label>
                                </p>
                                <div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- condicional para que no muestre modulos vacios -->
                @if ($modelo->texto_2 != '')
                    <div class="row content__container align-items-center ">

                        <div class="col-12 col-lg-6 content-first-column p-0">
                            <img src="{{ asset('assets/front/img/placeholder-img-medium.png') }}"
                                data-src="{{ asset('storage/modelo/' . $modelo->id . '/' . $modelo->foto_2) }}"
                                class="img-truck lazy">
                        </div>

                        <div class="col-12 col-lg-6 content-second-column p-0">
                            <div class="second-column__container mt-5 mt-0-lg">
                                <p class="subtitle-section column">
                                    <label>{{ $modelo->titulo_2 }}</label>
                                </p>
                                <p class="content-section column">
                                    <label>{{ $modelo->texto_2 }}</label>
                                </p>
                                <div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- condicional para que no muestre modulos vacios -->
                @if ($modelo->texto_3 != '')
                    <div class="row content__container align-items-center ">
                        <div class="col-12 col-lg-6 content-first-column p-0">
                            <img src="{{ asset('assets/front/img/placeholder-img-medium.png') }}"
                                data-src="{{ asset('storage/modelo/' . $modelo->id . '/' . $modelo->foto_3) }}"
                                class="img-truck lazy">
                        </div>

                        <div class="col-12 col-lg-6 content-second-column p-0">
                            <div class="second-column__container mt-5 mt-0-lg">
                                <p class="subtitle-section column">
                                    <label>{{ $modelo->titulo_3 }}</label>
                                </p>
                                <p class="content-section column">
                                    <label>{{ $modelo->texto_3 }}</label>
                                </p>
                                <div>


                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- condicional para que no muestre modulos vacios -->
                @if ($modelo->texto_4 != '')
                    <div class="row content__container align-items-center ">

                        <div class="col-12 col-lg-6 content-first-column p-0">
                            <img src="{{ asset('assets/front/img/placeholder-img-medium.png') }}"
                                data-src="{{ asset('storage/modelo/' . $modelo->id . '/' . $modelo->foto_4) }}"
                                class="img-truck lazy">
                        </div>

                        <div class="col-12 col-lg-6 content-second-column p-0">
                            <div class="second-column__container mt-5 mt-0-lg">
                                <p class="subtitle-section column">
                                    <label>{{ $modelo->titulo_4 }}</label>
                                </p>
                                <p class="content-section column">
                                    <label>{{ $modelo->texto_4 }}</label>
                                </p>
                                <div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- condicional para que no muestre modulos vacios -->
                @if ($modelo->texto_5 != '')
                    <div class="row content__container align-items-center ">

                        <div class="col-12 col-lg-6 content-first-column p-0">
                            <img src="{{ asset('assets/front/img/placeholder-img-medium.png') }}"
                                data-src="{{ asset('storage/modelo/' . $modelo->id . '/' . $modelo->foto_5) }}"
                                class="img-truck lazy">
                        </div>

                        <div class="col-12 col-lg-6 content-second-column p-0">
                            <div class="second-column__container mt-5 mt-0-lg">
                                <p class="subtitle-section column">
                                    <label>{{ $modelo->titulo_5 }}</label>
                                </p>
                                <p class="content-section column">
                                    <label>{{ $modelo->texto_5 }}</label>
                                </p>
                                <div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif


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

    <div id="sectionDescription">
        @if ($modelo->ficha != '')
            <div>
                <div class="sectionTitle">

                    <div>
                        <span>
                            <span>Descripción</span>
                        </span>
                        <div class="yellowBorder"></div>
                    </div>

                    <div class="title">
                        <span>Detalles Técnicos</span>
                    </div>

                </div>

                <div class="row techButtonContainer">

                    <a href="{{ asset('storage/modelo/' . $modelo->id . '/' . $modelo->ficha) }}"
                        download="{{ asset('storage/modelo/' . $modelo->id . '/' . $modelo->ficha) }}"
                        class="col-12 col-lg-auto d-flex justify-content-center">
                        <div class="techbtn">
                            <button type="" class="btn btn-secondary">
                                <span>
                                    <img src="{{ asset('assets/front/img/arrow-download.svg') }}" width="10px">
                                </span>
                                <span>Descargar Ficha técnica</span>
                            </button>
                        </div>
                    </a>

                </div>
            </div>
        @endif
        <!-- Gallery -->

        <div class="galleryContainer" id="sectionGallery">

            <div class="sectionTitle">
                <div>
                    <span></span>
                    <div class="yellowBorder"></div>
                </div>
                <div class="title">
                    <span>Galería</span>
                </div>
            </div>

            <div class="row justify-content-center mb-4">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active dividers" id="external-tab" href="#external" data-toggle="tab"
                            role="tab" aria-controls="external" aria-selected="true">
                            <div>
                                <span>EXTERIOR</span>
                            </div>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link dividers" id="internal-tab" href="#internal" data-toggle="tab"
                            role="tab" aria-controls="interior" aria-selected="false">
                            <div>
                                <span>INTERIOR</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>


            <div class="tab-content" id="galleryTab">
                <div class="tab-pane active" id="external" role="tabpanel" aria-labelledby="external-tab">
                    <span>
                        <div class="galleryCarousel">
                            <div class="galleryExternalSlick slider">

                                <!-- loop de  $modelo->exterior[] -->

                                @foreach (App\Modelo::galeria($modelo->id, 'exterior') as $foto)
                                    <div>
                                        <img src="{{ $foto['asset'] }}" data-src="{{ $foto['asset'] }}"
                                            class="img-fluid lazy" alt="">
                                    </div>
                                @endforeach

                            </div>

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

                <div class="tab-pane" id="internal" role="tabpanel" aria-labelledby="internal-tab">
                    <div class="galleryCarousel">

                        <div class="galleryInternalSlick slider">

                            <!-- loop de  $modelo->interior[]  -->

                            @foreach (App\Modelo::galeria($modelo->id, 'interior') as $foto)
                                <div>
                                    <img src="{{ $foto['asset'] }}" data-src="{{ $foto['asset'] }}"
                                        class="img-fluid lazy" alt="">
                                </div>
                            @endforeach

                        </div>

                    </div>
                </div>

            </div>

        </div>
    @endsection


    @section('scripts')
        <script type="text/javascript">
            $(document).ready(function() {
                var lazyLoadInstance = new LazyLoad({
                    elements_selector: ".lazy"
                });


            });

            // gallery external
            var slickConfig = {
                dots: false,
                infinite: true,
                arrows: true,
                prevArrow: "<button type='button' class='slick-prev pull-left'><img src='/assets/front/img/arrow-prev.png'></img></button>",
                nextArrow: "<button type='button' class='slick-next pull-right'><img src='/assets/front/img/arrow-next.png'></img></button>",
                speed: 300,
                slidesToShow: 1,
                slidesToScroll: 1,
                centerPadding: '20%',
                centerMode: true,
                waitForAnimate: true,
                responsive: [{
                    breakpoint: 554,
                    settings: {
                        centerMode: false,
                    }
                }]
            }
            $(".galleryExternalSlick").slick(slickConfig);

            // gallery internal
            var slickConfig = {
                dots: false,
                infinite: true,
                arrows: true,
                prevArrow: "<button type='button' class='slick-prev pull-left'><img src='/assets/front/img/arrow-prev.png'></img></button>",
                nextArrow: "<button type='button' class='slick-next pull-right'><img src='/assets/front/img/arrow-next.png'></img></button>",
                speed: 300,
                slidesToShow: 1,
                slidesToScroll: 1,
                centerPadding: '20%',
                centerMode: true,
                waitForAnimate: true,
                responsive: [{
                    breakpoint: 554,
                    settings: {
                        centerMode: false,
                    }
                }]
            }
            $(".galleryInternalSlick").slick(slickConfig);


            $(document).ready(function() {

                function resizeHeader() {
                    $('.header__breadcrumb').css('top', parseInt($('#navbarContainer').css("height")));
                }

                function autoScroll() {
                    window.onscroll = function() {
                        stickBreadcrumb()
                    };

                    var overview = document.getElementById("headerOverview");
                    var breadcrumb = document.getElementById("headerBreadcrumb");
                    var sticky = overview && overview.offsetTop;

                    function stickBreadcrumb() {
                        if (overview != null) {
                            if (window.pageYOffset >= sticky) {
                                overview && overview.classList.add("fixed")
                                breadcrumb && breadcrumb.classList.remove("absolute")
                                breadcrumb && breadcrumb.classList.add("fixed")
                                $('#overviewContainer').css('height', parseInt($('#headerOverview').css("height")) +
                                    parseInt($('.header__breadcrumb').css("height")));
                                resizeBreadcrumb()
                            } else {
                                overview && overview.classList.remove("fixed");
                                breadcrumb && breadcrumb.classList.remove("fixed");

                                breadcrumb && breadcrumb.classList.add("absolute");
                                resizeHeader()

                                $('#overviewContainer').css('height', '0');
                            }
                        }
                    }
                }

                function resizeBreadcrumb() {
                    $('.header__breadcrumb').css('top', parseInt($('#headerOverview').css("height")));
                }
                autoScroll()

                resizeHeader()

                $(window).resize(function() {
                    if (document.getElementById("headerBreadcrumb") && document.getElementById(
                            "headerBreadcrumb").classList.contains('fixed')) {
                        resizeBreadcrumb();
                    } else {
                        resizeHeader();
                    }
                });

                $(window).on("orientationchange", function(event) {
                    if (document.getElementById("headerBreadcrumb") && document.getElementById(
                            "headerBreadcrumb").classList.contains('fixed')) {
                        resizeBreadcrumb();
                    } else {
                        resizeHeader();
                    }
                });

            });
        </script>
    @endsection