@extends('layout.mainlayout')
@section('navbar')
@include('layout.partials.nav')
@endsection

@section('title', '- '.$auto->NMARCA.' '.$auto->NMODELO)

@section('estilos')
<link rel="stylesheet" href="{{asset('css/carrusel.css')}}">
<link rel="stylesheet" href="{{asset('css/ficha.css')}}">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css">
<style>
    .swiper {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .swiper {
        width: 100%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .swiper-slide {
        background-size: cover;
        background-position: center;
    }

    .mySwiper2 {
        height: 80%;
        width: 100%;
    }

    .mySwiper {
        height: auto;
        box-sizing: border-box;
        padding: 10px 0;
    }

    .mySwiper .swiper-slide {
        width: 25%;
        height: 100%;
        opacity: 0.4;
    }

    .mySwiper .swiper-slide-thumb-active {
        opacity: 1;
    }

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .youTube-btn {
        width: 95px;
        cursor: pointer;
        position: absolute;
        z-index: 1;
        right: 14px;
        top: 9px;
        transition: width 0.3s;
        transition-timing-function: ease-in;
    }

    .youTube-btn:hover {
        width: 100px;
    }
</style>
@endsection
@section('metas')
<meta property="og:image" itemprop="image" content='{{ isset($auto->fotos[0]) ? $auto->fotos[0] : '' }}'>

<meta property="og:title" content='{{env(' APP_CLIENTE')}}' />

@endsection
@section('scripts')
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script>

    function getId(url) {
        const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
        const match = url.match(regExp);
        return (match && match[2].length === 11) ?
            match[2] :
            null;
    }
    var url_youtube = "{{ $auto->VIDEO }}";
    const videoId = getId(url_youtube);
    var url_final = "https://www.youtube.com/embed/" + videoId + '?rel=0';

    $("#video-youtube").attr("src", url_final);
    //Pausar video
    $('#close').click(function () {
        $('.myFrame').removeAttr('src');
    });
</script>
<!--token ajax crsf -->
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('input[name="_token"]').val()
        }
    });
</script>

<script>
    $(document).ready(function () {
        $('#form-cotizador').submit(function (event) {
            event.preventDefault();
            const name = document.getElementById('nombre').value;
            const phone = document.getElementById('telefono').value;
            const email = document.getElementById('email').value;
            const message = document.getElementById('mensaje').value;
            const emailRegex = /^([A-Za-z0-9_\-.+])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,})$/;
            const btn = document.getElementById('enviar');

            if (!name) {
                alert('Por favor ingrese su nombre');
                return false;
            } else if (!phone) {
                alert('Por favor ingrese su teléfono');
                return false;
            } else if (phone.length < 9 || phone.length > 12) {
                alert('Por favor ingrese un teléfono válido');
                return false;
            } else if (!email) {
                alert('Por favor ingrese su email');
                return false;
            } else if (!emailRegex.test(email)) {
                alert('Por favor ingrese un email válido');
                return false;
            } else if (!message) {
                alert('Por favor ingrese un mensaje');
                return false;
            } else {
                btn.disabled = true;
                $('#enviar > span:eq(1)').html('ENVIANDO...');
                $(this).off('submit').submit();
            }
        })
    })
</script>


<!--js carrusel inicio-->
<script src="{{asset('js/jquery-3.4.1.min.js')}}" type="text/javascript"></script>
<script src="{{asset('js/jssor.slider-27.5.0.min.js')}}" type="text/javascript"></script>
<!--style carrusel fin-->
<!--java carrusel inicio-->
<script type="text/javascript">


    /*#region responsive code begin*/

    var MAX_WIDTH = 730;

    function ScaleSlider() {
        var containerElement = jssor_1_slider.$Elmt.parentNode;
        var containerWidth = containerElement.clientWidth;

        if (containerWidth) {

            var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);

            jssor_1_slider.$ScaleWidth(expectedWidth);
        } else {
            window.setTimeout(ScaleSlider, 30);
        }
    }

    ScaleSlider();


</script>
<!--java carrusel fin-->
<!--style carrusel inicio-->


<!--SCRIPT NUEVO MAPA -->
<script>
    var map = L.map('mapid').setView([{{ $automotora->LATITUD }}, {{ $automotora->LONGITUD }}], 16);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      minZoom: 1,
      maxZoom: 17,
    }).addTo(map);
  
    L.marker([{{ $automotora->LATITUD }}, {{ $automotora->LONGITUD }}]).addTo(map)
      .bindPopup(
        '<div style=" width:60px; display: inline-block;"><img src="{{ $automotora->FACHADAURL }}" style=" width:72px; height:50px; display:block; vertical-align:top;"></div><div style=" width:160px; display: inline-block; vertical-align:top; margin:0px 0px 0px 20px;">' +
        '{{ $automotora->CALLE }} {{ $automotora->NUMERO }}' + '{{ $automotora->COMUNA }} ,{{ $automotora->PAIS }}' +
        '</div>').openPopup();
    var popup = L.popup();
  </script>
  <!--FIN SCRIPT NUEVO MAPA-->

<!-- Funciones para los checkbox del formulario del cotizador-->
<script type="text/javascript">
    //Bibliotecas de facabook
    // window.fbAsyncInit = function() {
    //     FB.init({
    //         appId      : {{env("APP_FACEBOOKID")}},
    //         xfbml      : true,
    //         version    : 'v2.3'
    //     });
    // };

    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) { return; }
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));


    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId={{env("APP_FACEBOOKID")}}";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    //Fin de Bibliotecas de facabook

    //Twitter
    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (!d.getElementById(id)) {
            js = d.createElement(s);
            js.id = id;
            js.src = "//platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js, fjs);
        }
    }(document, "script", "twitter-wjs"));

    //Google+
    (function () {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();

    //Whatsaap
    if (typeof wabtn4fg === "undefined") {
        wabtn4fg = 1;
        h = document.head || document.getElementsByTagName("head")[0], s = document.createElement("script");
        s.type = "text/javascript";
        s.src = "{{asset('js/whatsapp-button.js')}}"; h.appendChild(s);
    };
</script>
<!--fin -->
<!-- Función de funcionContador -->
<script type="text/javascript">
    function funcionContador(AutoId, TipoId, Cant) {
        $.ajax({
            type: 'POST',
            url: "{{route('contar')}}",
            dataType: "json",
            data: { 'autoid': AutoId, 'tipo': TipoId, 'cantidad': Cant },
            success: function (data) {
                console.log(data)
            },
            error: function (data) {
                console.log(data)
            }
        });
    }
</script>
<!--fin-->
<!--redes -->
<script>

    function cotizaWhatsapp() {

        const telefono = {{ $auto-> Whatsapp
    }}
    const urlwhatsapp = 'https://wa.me/' + telefono + '/?text=';
    const encodeurl_actual = window.location.href;
    //var mensaje = 'wololo'
    const mensaje = '¡Hola! Quisiera más información acerca de: \n {{$auto->NMARCA}} {{$auto->NMODELO}} {{$auto->year}} que se encuentra publicado en: ' + encodeurl_actual
    const respuesta = urlwhatsapp + " " + mensaje;
    window.open(respuesta, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');

        //window.open("https://api.whatsapp.com/send?text=" + encodeURIComponent(mensaje));
        //funcionContador(eIdAuto, 4, 1);
    }

    function redes(x) {

        if (x == 1) {//facebook


            var urlfacebook = 'http://www.facebook.com/sharer.php?u=';
            var pUrl = '{{$automotora->URL}}';
            var eIdAuto = '{{$auto->idauto}}' //autoid;
            var url_actual = '{{url()->current()}}'

            var encodeurl_actual = encodeURIComponent(url_actual);


            var respuesta = urlfacebook + encodeurl_actual;
            var vesrion = "{{$auto->version ? '-'.$auto->version.'-' : '-' }}"
            var ptitulo = '{{$auto->NMARCA}}' + '-' + '{{$auto->NMODELO}}' + version + '{{$auto->moneda}}' + '-' + '{{$auto->precio}}'
            console.log(ptitulo);
            var tittle_actual = ptitulo;
            var foto = '{{isset($auto->fotos[0]) ? $auto->fotos[0] : asset('images/demo/default.jpg')}}';
            foto = !foto || foto == '' ? "{{asset('images/demo/default.jpg')}}" : foto;

            var fotomuestra = foto;

            var hNombreCliente = '{{$automotora->nombre}}';
            var pNombre = '{{$automotora->nombre}}';
            var pAuto = $('#pAuto').val();

            var pDireccion = '{{$automotora->CALLE}}' + '{{$automotora->COMUNA}}' + '{{$automotora->CIUDAD}}';
            var vpFonos1 = '{{$automotora->FONO1}}'
            var vpFonos2 = '{{$automotora->FONO2}}'

            var Descripcion = ptitulo + ' Lo Vende: ' + pNombre + '. Ubicado en : ' + pDireccion + '. Fonos : ' + vpFonos1 + ' - ' + vpFonos2;

            var idfacebook = '{{env("APP_FACEBOOKID")}}'

            FB.init({
                appId: idfacebook,
                xfbml: true,
                version: 'v2.1'
            });

            FB.ui(
                {
                    method: 'feed',
                    name: tittle_actual,
                    link: url_actual,
                    caption: pUrl,
                    picture: fotomuestra,
                    description: hNombreCliente,
                    message: Descripcion
                }
            );
            //window.open(respuesta, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
            funcionContador(eIdAuto, 1, 1);

        }
        if (x == 2) {//twitter


            var urltwitter = 'https://twitter.com/intent/tweet?text=';
            var ptitulo = '{{$auto->NMARCA}}' + '-' + '{{$auto->NMODELO}}' + '-' + '{{$auto->moneda}}' + '-' + '{{$auto->precio}}'

            var tittle_actual = ptitulo;

            var pUrl = $('#pUrl').val();
            var url_actual = '{{url()->current()}}';

            var eIdAuto = '{{$auto->idauto}}'

            url_actual = '{{url()->current()}}'

            var encodeurl_actual = encodeURIComponent(url_actual.replace(" ", "-"));

            var encodetittle = encodeURIComponent(tittle_actual);


            var respuesta = urltwitter + encodetittle + "&url=" + encodeurl_actual + "&via=ValenzuelaDelar";

            funcionContador(eIdAuto, 2, 1);

            window.open(respuesta, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');

        }

        if (x == 3) {//google+

            var urlgoogle = 'https://plus.google.com/share?url=';
            var ptitulo = $('#ptitulo').val(); //autoid;

            var tittle_actual = ptitulo;

            var pUrl = $('#pUrl').val();
            var pNomUrl = $('#pNomUrl').val();
            var eIdAuto = $('#eIdAuto').val();

            var url_actual = pUrl + 'ficha.php?' + pNomUrl + '&eIdAuto=' + eIdAuto;

            var encodeurl_actual = encodeURIComponent(url_actual.replace(" ", "-"));

            var encodetittle = encodeURIComponent(tittle_actual);


            var respuesta = urlgoogle + encodeurl_actual + "/" + encodetittle;

            respuesta = encodeURIComponent(respuesta.replace(" ", "-"));

            url_actual = url_actual + '?' + tittle_actual;

            var url;

            url = 'https://plus.google.com/share?';
            url += '&url=' + encodeURIComponent(url_actual.replace(" ", "-"));
            //alert("url = " + url);

            funcionContador(eIdAuto, 3, 1);

            window.open(trim(url), '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');


        }
        if (x == 4) {//whatsapp

            var urlwhatsapp = 'https://wa.me/56994146346/?text=';

            var ptitulo = $('#ptitulo').val(); //autoid;

            var tittle_actual = ptitulo;
            var pUrl = $('#pUrl').val();
            var pNomUrl = $('#pNomUrl').val();
            var eIdAuto = $('#eIdAuto').val();

            var url_actual = pUrl + 'ficha.php?' + pNomUrl + '&eIdAuto=' + eIdAuto;

            var encodeurl_actual = window.location.href;

            var encodetittle = encodeURIComponent(tittle_actual);

            //var mensaje = 'wololo'
            var mensaje = '¡Hola! Quisiera más información acerca de: \n {{$auto->NMARCA}} {{$auto->NMODELO}} {{$auto->year}} que se encuentra publicado en: ' + encodeurl_actual

            var respuesta = urlwhatsapp + encodetittle + " " + mensaje;



            window.open(respuesta, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');

            //window.open("https://api.whatsapp.com/send?text=" + encodeURIComponent(mensaje));
            funcionContador(eIdAuto, 4, 1);
        }
    }
</script>
<!-- Función de llamar -->
<script type="text/javascript">
    function llama() {
        funcionContador({{ $auto-> idauto}}, 5, 1);
        }
</script>
<!--fin-->
<script type="text/javascript">


</script>
@endsection
@section('content')

<div id="autosUsados" class="mt-5">

    <div class="load-semi" style="display:none;" id="carga">
        <img src="{{asset('images/demo/loading.svg')}}" width="80" height="80" alt="">
    </div>

    <div class="car-details" style="margin:0 auto;">
        <div class="container">

            <!-- BANNER RRSS MOBILE -->
            <div class="bton-seg02" style="display: none;">
                <div class="col-6 col-sm-3 cotiza-30">
                    <a href="" style="cursor: pointer;" class="volverF">
                        <h2><i class="fa fa-angle-double-left flecha01" aria-hidden="true"></i> Volver</h2>
                    </a>
                </div>
                <div class="col-6 col-sm-6 Compartir">
                    <ul class="Compartir-list">
                        <li>
                            <div id="dFacebook">
                                <a onClick="javascript:redes(1);" class="facebook" style="cursor: pointer;">
                                    <i class="fa fa-facebook"></i>
                                </a>
                            </div>
                        </li>
                        <li>
                            <div id="dTwitter">
                                <a onClick="javascript:redes(2);" class="twitter" style="cursor: pointer;">
                                    <i class="fa fa-twitter"></i>
                                </a>
                            </div>
                        </li>
                        <li>
                            <div id="dWhatsApp">
                                <a onClick="javascript:redes(4);" class="Whatsapp" style="cursor: pointer;">
                                    <i class="fa fa-whatsapp"></i>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col-4 col-sm-3 volver-40">
                    <a href="#cotiza0002">
                        <i class="fa fa-envelope flecha01" aria-hidden="true"></i>
                        <h2>Cotizar</h2>
                    </a>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-8">
                    <div class="border-box p-3 d-flex justify-content-between">
                        <div class="d-flex align-items-center">
                            <div class="p-3 d-none d-lg-block">
                                <img src="{{asset('images/ficha/icn-auto.svg')}}" alt="">
                            </div>
                            <div>
                                <h4 class="font-extra-bold text-gray-dark">{{$auto->NMARCA.' '. $auto->NMODELO.'
                                    '.$auto->version}}</h4>
                                @if ($auto->VCHLEGALPRECIO)
                                <h5 class="text-gray-dark">PRECIO ${{ number_format($auto->VCHLEGALPRECIO, '0', ',',
                                    '.') }}
                                </h5>
                                <div class="bg-main-orange py-2 px-2">
                                    <p class="text-white mb-0 font-extra-bold">PRECIO CON FINANCIAMIENTO:
                                        ${{number_format($auto->precio,'0', ',','.')}}</p>
                                </div>
                                @else
                                <div class="bg-main-orange py-2 px-2">
                                    <h5 class="text-white mb-0 font-extra-bold">PRECIO LISTA:
                                        ${{number_format($auto->precio,'0', ',','.')}}</h5>
                                </div>
                                @endif
                            </div>
                        </div>
                        <div>
                            <!-- Boton volver -->
                            <a href="{{ url()->previous() }}" style="cursor: pointer;">
                                <div class="d-none d-lg-flex">
                                    <div class="bg-main-orange p-2 text-white">
                                        <i class="fa-regular fa-circle-left fs-25"></i>
                                    </div>
                                    <div class="bg-gray-dark text-white py-2 ps-3 pe-4">
                                        VOLVER
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 pt-3 pt-lg-0">
                    <div class="row">
                        <div class="col-6">
                            <div class="border-box d-flex p-2 align-items-center">
                                <img src="{{asset('images/miniFicha/calendar.svg')}}" alt="">
                                <p class="text-center mb-0 ps-4">{{$auto->year}}</p>
                            </div>

                            <div class="border-box d-flex p-2 align-items-center mt-3">
                                <img src="{{asset('images/miniFicha/gasolina.svg')}}" alt="">
                                <p class="text-center mb-0 ps-4">{{$auto->combustible_nombre}}</p>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="border-box d-flex p-2 align-items-center">
                                <img src="{{asset('images/miniFicha/transmision.svg')}}" alt="">
                                <p class="text-center mb-0 ps-4">
                                    {{str_replace('Transmisión','',$auto->transmision_nombre)}}</p>
                            </div>

                            <div class="border-box d-flex p-2 align-items-center mt-3">
                                <img src="{{asset('images/miniFicha/km.svg')}}" alt="">
                                <p class="text-center mb-0 ps-4">{{number_format($auto->kms,'0', ',','.')}} Kms</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- CARRUSEL + FORM -->
            <div class="row">
                <!-- CARRUSEL -->
                <div class="col-lg-8 mt-4">
                                        <div class="ribbon-wrapper-Ficha">
                        <div class="ribbon-css-Ficha"
                            style="background-color: {{$auto->color_etiqueta}}; color:{{$auto->color_letra_etiqueta}} ">
                            {{$auto->titulo_etiqueta}}</div>
                    </div>
                    
                    <div class="swiper mySwiper2" style="height: fit-content;">
                        <div class="swiper-wrapper">
                            @foreach($auto->fotos as $foto)
                            <div class="swiper-slide">
                                <a href="{{$foto}}" data-fancybox='images'>
                                    <img src="{{$foto}}" alt="" />
                                </a>
                            </div>
                            @endforeach
                        </div>
                        <div class="swiper-button-next mx-3"><img src="{{asset('images/siguiente.png')}}" alt=""></div>
                        <div class="swiper-button-prev mx-3"><img src="{{asset('images/anterior.png')}}" alt=""></div>
                    </div>

                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                            @foreach($auto->fotos as $foto)
                            <div class="swiper-slide">
                                <img src="{{$foto}}" alt="" />
                            </div>
                            @endforeach
                        </div>

                        <div class="fs-12">“Precios, equipamiento e información sujetos a cambio sin previo aviso. Las
                            imágenes son ilustrativas y pueden no coincidir con los productos exhibidos y ofrecidos en
                            concesionarios. Contacte un vendedor para verificar los datos publicados” </div>
                    </div>



                    <!-- Swiper JS -->
                    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

                    <!-- Initialize Swiper -->
                    <script>
                        var swiper = new Swiper(".mySwiper", {
                            loop: true,
                            spaceBetween: 10,
                            slidesPerView: 4,
                            freeMode: true,
                            watchSlidesProgress: true,
                        });
                        var swiper2 = new Swiper(".mySwiper2", {
                            loop: true,
                            spaceBetween: 10,
                            navigation: {
                                nextEl: ".swiper-button-next",
                                prevEl: ".swiper-button-prev",
                            },
                            thumbs: {
                                swiper: swiper,
                            },
                        });
                    </script>
                </div>


                <div class="col-12 col-lg-4 mt-4">
                    <h2 class="font-extra-bold text-gray-dark">DESCRIPCIÓN</h2>

                    <div id="descr" class="tab-pane">
                        <div class="car-detail-block">
                            <div id="dDescripcion">
                                <p class="text-gray-dark text-uppercase fs-14 font-light">{{$auto->descripcion}}</p>
                            </div>
                        </div>
                    </div>

                    <!-- FORM COTIZACION -->
                    <div class="share mrg-b-30" id="cotiza0002">
                        <h5 class="title bg-gray-dark text-white p-2 text-center mt-3 rounded">COTIZA</h5>
                        <form id="form-cotizador" action="{{route('cotizar',['id' => $auto->idauto])}}" method="post">
                            @csrf
                            {!! Honeypot::generate('myHoneypot', 'my_time') !!}

                            <input type="hidden" id="Marca" name="Marca" value="{{$auto->NMARCA}}" />
                            <input type="hidden" id="Modelo" name="Modelo" value="{{$auto->NMODELO}}" />
                            <input type="hidden" id="Ano" name="Ano" value="{{$auto->year}}" />
                            <input type="hidden" id="Version" name="Version" value="{{$auto->version}}" />
                            <input type="hidden" id="clienteid" name="clienteid" value="{{$auto->clienteid}}" />
                            <input type="hidden" id="precio" name="precio" value="{{$auto->precio}}" />
                            <input type="hidden" id="kms" name="kms" value="{{$auto->kms}}" />
                            <input type="hidden" id="tipo_mail" name="tipo_mail" value="20" />
                            <input type="hidden" name="fono1automotora" id="fono1automotora"
                                value="{{$automotora->FONO1}}">
                            <input type="hidden" name="fono2automotora" id="fono2automotora"
                                value="{{$automotora->FONO2}}">
                            <input type="hidden" name="emailautomotora" id="emailautomotora"
                                value="{{$automotora->EMAIL1}}">
                            <input type="hidden" name="foto" id="foto"
                                value="{{isset($auto->fotos[0]) ? $auto->fotos[0] : ''}}">
                            <input type="hidden" name="parametros" id="parametros" value="{{$url_parametros}}">

                            <input type="hidden" id="Tabla" name="Tabla" value="1" />

                            <div class="p-4 container-forms">
                                <div class="form-group py-2">
                                    <input type="text" class="form-control" name="nombre" id="nombre"
                                        placeholder="Nombre y Apellido" value="{{old('nombre')}}">
                                    @error('nombre')
                                    <div class="alerta" id="nombre001" style="display:block">
                                        <p class="alert01"><i class="fa fa-info-circle color01"></i>{{$message}}</p>
                                    </div>
                                    @enderror
                                </div>

                                <div class="form-group py-2">
                                    <input type="phono" class="form-control" value="{{old('telefono')}}" id="telefono"
                                        placeholder="Teléfono" name="telefono">
                                    @error('telefono')
                                    <div class="alerta" id="telefono001" style="display:block">
                                        <p class="alert01"><i class="fa fa-info-circle color01"></i>{{$message}}</p>
                                    </div>
                                    @enderror
                                </div>

                                <div class="form-group py-2">
                                    <input type="email" class="form-control" value="{{old('email')}}" id="email"
                                        placeholder="E-mail" name="email">
                                    @error('email')
                                    <div class="alerta" id="email001" style="display:block">
                                        <p class="alert01"><i class="fa fa-info-circle color01"></i>{{$message}}</p>
                                    </div>
                                    @enderror
                                </div>

                                <div class="form-group py-2">
                                    <textarea class="form-control" id="mensaje" name="mensaje"
                                        placeholder="Mensaje">{{old('mensaje')}}</textarea>
                                    @error('mensaje')
                                    <div class="alerta" id="mesaje001" style="display:block">
                                        <p class="alert01"><i class="fa fa-info-circle color01"></i>{{$message}}</p>
                                    </div>
                                    @enderror
                                </div>

                                <div class="search-block">
                                    <div class="checkbox checkbox-theme checkbox-circle mt-3">
                                        <input id="cotiza_credito" name="cotiza_credito" data-bs-toggle="collapse"
                                            data-bs-target="#collapseCredit" aria-expanded="false"
                                            aria-controls="collapseCredit" value="1" style="z-index:10000000;"
                                            type="checkbox" {{old('cotiza_credito') ? "checked" : "" }}>
                                        <label for="cotiza_credito" class="text-gray">COTIZA TU CR&Eacute;DITO</label>
                                    </div>

                                    <div class="form-group cajaCotizaCredito collapse mb-0" id="collapseCredit">
                                        <div class="form-group">
                                            <input class="form-control" id="pie" name="pie" placeholder="Pie"
                                                value="{{old('pie')}}">
                                            <input type="hidden" name="pie_limpio" id="pie_limpio">
                                            @error('pie')
                                            <div class="alerta" id="pie001" style="display:block">
                                                <p class="alert01"><i class="fa fa-info-circle color01"></i>{{$message}}
                                                </p>
                                            </div>
                                            @enderror
                                        </div>
                                        <div class="form-group mb-0">
                                            <p class="c01"> Cuotas</p>
                                            <div style="margin-top:0;margin-left:2px;" class="form-group">
                                                <input class="checkQuote" id="checkbox2" name="num_cuotas[]"
                                                    type="checkbox" value="12" {{old('num_cuotas.0') ? "checked" : ""
                                                    }}>
                                                <label for="checkbox2">12</label>
                                                <input class="checkQuote" id="checkbox3" name="num_cuotas[]"
                                                    type="checkbox" value="24" {{old('num_cuotas.1') ? "checked" : ""
                                                    }}>
                                                <label for="checkbox3">24</label>
                                                <input class="checkQuote" id="checkbox4" name="num_cuotas[]"
                                                    type="checkbox" value="36" {{old('num_cuotas.2') ? "checked" : ""
                                                    }}>
                                                <label for="checkbox4">36</label>
                                                <input class="checkQuote" id="checkbox5" name="num_cuotas[]"
                                                    type="checkbox" value="48" {{old('num_cuotas.3') ? "checked" : ""
                                                    }}>
                                                <label for="checkbox5">48</label>
                                                <input class="checkQuote" id="checkbox6" name="num_cuotas[]"
                                                    type="checkbox" value="60" {{old('num_cuotas.4') ? "checked" : ""
                                                    }}>
                                                <label for="checkbox6">60</label>
                                            </div>
                                            @error('num_cuotas')
                                            <div class="alerta" id="cuotas001" style="display:block">
                                                <p class="alert01"><i class="fa fa-info-circle color01"></i>{{$message}}
                                                </p>
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="caja100">
                                        <div class="checkbox checkbox-theme checkbox-circle mt-3">
                                            <input id="auto_en_parte" name="auto_en_parte" data-bs-toggle="collapse"
                                                data-bs-target="#collapsePayCar" aria-expanded="false"
                                                aria-controls="collapsePayCar" style="z-index:10000000;" type="checkbox"
                                                {{old('auto_en_parte') ? "checked" : "" }}>
                                            <label for="auto_en_parte" class="text-gray">DEJA TU AUTO EN PARTE DE
                                                PAGO</label>
                                        </div>
                                        <div id="collapsePayCar" class="caja100 cajaAutoPago collapse">
                                            <input type="text" class="form-control" id="autopago" name="autopago"
                                                value="{{old('autopago')}}"
                                                placeholder="Automóvil, marca, modelo, versión, año, kilometraje, etc"
                                                style="height: 25px;">
                                        </div>
                                        @error('autopago')
                                        <div class="alerta" id="pago001" style="display:block">
                                            <p class="alert01"><i class="fa fa-info-circle color01"></i>{{$message}}</p>
                                        </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-group text-center">
                                    <button id="enviar" class="btn-send mt-3 waves-effect waves-light float-right"
                                        type="submit"><span id="spinner" style="display:none;margin-right:5px"
                                            class="spinner-border spinner-border-sm" role="status"
                                            aria-hidden="true"></span><span>ENVIAR</span></button>
                                </div>


                            </div>
                        </form>

                    </div>
                </div>

            </div>
            <!-- <button>
                <a onClick="javascript:cotizaWhatsapp();" class="Whatsapp" style="cursor: pointer;">
                    Cotiza por whatsapp
                    <i class="fa-brands fa-whatsapp"></i>
                </a>
            </button> -->
            <!-- DESCRIPCION + UBICACION -->
            <div class="row mb-5">
                <!-- DESCRIPCION + EQUIPAMIENTO -->
                <div class="col-12 col-md-8 my-3">
                    <h2 class="font-extra-bold text-gray-dark">EQUIPAMIENTO</h2>
                    <div id="tab2default" class="border-box p-4">
                        <div class="row">
                            <div class="box-lista features">
                                <ul class="col-12 three-columns " id="dCaracteristicas">
                                    @foreach ($auto->caracteristicas as $caracteristica)
                                    @if (file_exists(public_path('images/equipamiento/' .
                                    Str::of($caracteristica)->slug('-') . '.svg')))
                                    <li class="px-1 py-2">
                                        <img width="35px" height="35px" class="filter-img"
                                            src="{{ asset('images/equipamiento/' . Str::of($caracteristica)->slug('-') . '.svg') }}"
                                            alt="">
                                        &nbsp;&nbsp;{{ $caracteristica }}
                                    </li>
                                    @else
                                    <li> <i class="fa fa-check text-gray"></i>{{$caracteristica}}</li>
                                    @endif
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- UBICACION -->
                <div class="col-12 col-md-4 my-3 px-2 h-100">
                    <h2 class="font-extra-bold text-gray-dark">UBICACIÓN</h2>
                    <!-- Inicio nuevo mapa-->
                    <div id="mapid" style="width: 100%; height: 400px;"></div>
                    <!--FIN MAPA-->
                </div>


                <h2 class="font-extra-bold text-gray-dark mt-5">SUGERIDOS</h2>

                @include('components.miniFicha', ['data' => $auto->similares])
                {{-- <div class="row col-12">
                    <div class="col-12 col-lg-8">
                        <div class="Compartir C2" style="display: block">
                            <ul class="Compartir-list">
                                <li>
                                    <div id="dFacebook">
                                        <a onClick="javascript:redes(1);" class="facebook" style="cursor: pointer;">
                                            <i class="fa fa-facebook"></i>
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <div id="dTwitter">
                                        <a onClick="javascript:redes(2);" class="twitter" style="cursor: pointer;">
                                            <i class="fa fa-twitter"></i>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div> --}}

            </div>
        </div>


        <input id="pagina" name="pag" value=""
        type="hidden">
        <input id="micategoria" name="micategoria" type="hidden" value="">
        <input id="mimarca" name="mimarca" type="hidden" value="">
        <input id="mimodelo" name="mimodelo" type="hidden" value="">
        <input id="mianoh" name="mianoh" type="hidden" value="">
        <input id="miprecio" name="miprecio" type="hidden" value="">
        <input id="micombustible" name="micombustible" type="hidden" value="">
        <input id="mitransmision" name="mitransmision" type="hidden" value="">
        <input id="misucursal" name="misucursal" type="hidden" value="">
        <input id="miorden" name="miorden" type="hidden" value="">

        <input type="hidden" id="pAuto" name="pAuto" value="" />
        <input type="hidden" id="pCliente" name="pCliente" value="" />
        <input type="hidden" id="eIdAuto" name="eIdAuto" value="" />
        <input type="hidden" id="pcAuto" name="pcAuto" value="" />
        <input type="hidden" id="pUrl" name="pUrl" value="" />
        <input type="hidden" id="vpPrecio" name="vpPrecio" value="" />
        <input type="hidden" id="pEmail" name="pEmail" value="" />
        <input type="hidden" id="pNombre" name="pNombre" value="" />
        <input type="hidden" id="pMarca" name="pMarca" value="" />
        <input type="hidden" id="pModelo" name="pModelo" value="" />
        <input type="hidden" id="pAnoFab" name="pAnoFab" value="" />
        <input type="hidden" id="pNomUrl" name="pNomUrl" value="" />
        <input type="hidden" id="ptitulo" name="ptitulo" value="" />
        <input type="hidden" id="pCodigo" name="pCodigo" value="" />
        <input type="hidden" id="pNombre" name="pNombre" value="" />
        <input type="hidden" id="pDireccion" name="pDireccion" value="" />
        <input type="hidden" id="vpFonos1" name="vpFonos1" value="" />
        <input type="hidden" id="vpFonos2" name="vpFonos2" value="" />
        <input type="hidden" id="idfacebook" name="idfacebook" value="" />
    </div>

    <div style="clear:both"></div>
    @endsection
    @section('footer')
    @include('layout.partials.footer')
    @endsection
    @section('estilos')

    @endsection
    <!--style carrusel fin-->