templates/front/models/detail_bus.html.twig line 1

Open in your IDE?
  1. {% extends "front/_common/_base.html.twig" %}
  2. {% block linkcanonical %}
  3.     <link rel="canonical" href="{{ absolute_url(path('modelbus_detail', {'slug': truck.slug})) }}">
  4. {% endblock %}
  5. {% block cssadicional %}
  6.     <link rel="stylesheet" href="{{ asset('static/js/slick/slick.css') }}">
  7.     <link rel="stylesheet" href="{{ asset('static/js/slick/slick-theme.css') }}">
  8.     <link rel="stylesheet" href="{{ asset('static/js/lightgallery/lightgallery.css') }}">
  9.     <link rel="stylesheet" href="{{ asset('static/js/lightgallery/lg-transitions.min.css') }}">
  10.     <link rel="stylesheet" href="{{ asset('static/js/lightgallery/lg-fb-comment-box.min.css') }}">
  11.     <link rel="stylesheet" href="{{ asset('static/js/validationform/validationEngine.jquery.css') }}">
  12.     <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
  13. {% endblock %}
  14. {% block classbody %}detalle_listado_header_none{% endblock %}
  15. {% block content %}
  16.     <div class="detalle_parent_header">
  17.         <div class="detalle_listado_header">
  18.             <a href="{{ path('model_list') }}" class="detalle_listado_icono_header icon-arrow_back_ios"></a>
  19.             <div class="detalle_listado_wrap_header_links">
  20.                 <div class="detalle_listado_header_envolve">
  21.                     <a class="detalle_listado_header_img" href="{{ sd.returnLink ? sd.returnLink : back_url }}" target="{{ (sd.returnTarget and sd.returnLink)|url_target }}">
  22.                         <img src="{{ asset(info.headerLogoColor|image_path) }}" width="185" alt="{{ info.seoTitle }}">
  23.                     </a>
  24.                     <p>{{ truck.title }}</p>
  25.                 </div>
  26.                 <div class="detalle_listado_header_row">
  27.                     <div class="detalle_listado_header_btn_cotiza">
  28.                         <a class="btn btn_lightblue" href="">Cotizar</a>
  29.                     </div>
  30.                     <ul class="headerdetailListJs">
  31.                         {% if truck.characteristicsShow %}
  32.                             <li><a class="active header_detalle_link" href="#caracteristicas" data-href="#caracteristicas">Características</a></li>
  33.                         {% endif %}
  34.                         {% if truck.descriptionShow %}
  35.                             <li><a class="header_detalle_link" href="#description" data-href="#description">Descripción</a></li>
  36.                         {% endif %}
  37.                         {% if truck.applicationsShow %}
  38.                             <li><a class="header_detalle_link" href="#aplicaciones" data-href="#aplicaciones">Aplicaciones</a></li>
  39.                         {% endif %}
  40.                         {% if truck.attributesShow %}
  41.                             <li><a class="header_detalle_link" href="#atributos" data-href="#atributos">Atributos</a></li>
  42.                         {% endif %}
  43.                         {% if truck.technicalDatasheetShow %}
  44.                             <li><a class="header_detalle_link" href="#fichatecnica" data-href="#fichatecnica">Ficha Técnica</a></li>
  45.                         {% endif %}
  46.                     </ul>
  47.                 </div>
  48.             </div>
  49.         </div>
  50.     </div>
  51.     <section class="detalle_listado_container">
  52.         <div class="detalle_scroll_listado">
  53.             <img src="{{ STATIC_URL }}img/scroll.svg" width="" height="" alt="">
  54.             <span>Scroll</span>
  55.         </div>
  56.         <div class="detalle_listado_container_center ww_center" data-sticky-container="data-sticky-container">
  57.             <div class="detalle_listado_container_left">
  58.                 <div class="detalle_listado_links">
  59.                     <ul>
  60.                         <li><a href="{{ path('home') }}">Inicio</a></li>
  61.                         <li><span>/</span></li>
  62.                         <li><a href="{{ path('model_list') }}">VW Camiones y Buses</a></li>
  63.                         <li><span>/</span></li>
  64.                         <li><a href="{{ path('model_buses') }}">Busses</a></li>
  65.                         <li><span>/</span></li>
  66.                         <li><a class="active">{{ truck.title }}</a></li>
  67.                     </ul>
  68.                 </div>
  69.                 <div class="b1detalle">
  70.                     <div class="b1detalle_content ww_center">
  71.                         <h1 class="b1detalle_title">{{ truck.title }}</h1>
  72.                         <div class="b1detalle_block">
  73.                             <div class="b1detalle_bigslider">
  74.                                 <ul class="b1detalleSliderBig">
  75.                                     <li>
  76.                                         <figure class="b1detalle_imgbig">
  77.                                             <img src="{{ asset(truck.image|image_path) }}" width="616" height="88" alt="{{ truck.title }}">
  78.                                         </figure>
  79.                                     </li>
  80.                                     {% for item in truck.galleryItems %}
  81.                                         <li>
  82.                                             <figure class="b1detalle_imgbig">
  83.                                                 <img src="{{ asset(item.image|image_path) }}" width="616" height="88" alt="{{ truck.title }}">
  84.                                             </figure>
  85.                                         </li>
  86.                                     {% endfor %}
  87.                                 </ul>
  88.                             </div>
  89.                             <div class="b1detalle_minislider">
  90.                                 <ul class="b1detalleSliderMini">
  91.                                     <li>
  92.                                         <figure class="b1detalle_imgmini">
  93.                                             <img src="{{ asset(truck.image|image_path) }}" width="150" height="88" alt="{{ truck.title }}">
  94.                                         </figure>
  95.                                     </li>
  96.                                     {% for item in truck.galleryItems %}
  97.                                         <li>
  98.                                             <figure class="b1detalle_imgmini">
  99.                                                 <img src="{{ asset(item.image|image_path) }}" width="150" height="88" alt="{{ truck.title }}">
  100.                                             </figure>
  101.                                         </li>
  102.                                     {% endfor %}
  103.                                 </ul>
  104.                                 <div class="b1detalle_controls">
  105.                                     <span class="b1detalle_arrow b1detalle_mini_prev icon-arrow_back_ios"></span>
  106.                                     <span class="b1detalle_arrow b1detalle_mini_next icon-arrow_forward_ios"></span>
  107.                                 </div>
  108.                             </div>
  109.                         </div>
  110.                         {% if truck.characteristicsShow or truck.descriptionShow %}
  111.                             <div class="b1detalle_info">
  112.                                 {% if truck.characteristicsShow %}
  113.                                     <div class="b1detalle_item" id="caracteristicas">
  114.                                         <h2 class="b1detalle_subtitle">Características</h2>
  115.                                         <div class="b1detalle_group">
  116.                                             {% for item in truck.characteristicsItems %}
  117.                                                 <div class="b1detalle_box">
  118.                                                     <p>{{ item.title }}</p>
  119.                                                     <p><strong>{{ item.description }}</strong></p>
  120.                                                 </div>
  121.                                             {% endfor %}
  122.                                         </div>
  123.                                     </div>
  124.                                 {% endif %}
  125.                                 <div class="b1detalle_listado_form"></div>
  126.                                 {% if truck.descriptionShow %}
  127.                                     <div class="b1detalle_item" id="description">
  128.                                         {% if  truck.descriptionTitle %}
  129.                                             <h2 class="b1detalle_subtitle">{{ truck.descriptionTitle }}</h2>
  130.                                         {% endif %}
  131.                                         {% if truck.descriptionText %}
  132.                                             <div class="b1detalle_description">
  133.                                                 <p>{{ truck.descriptionText|nl2br }}</p>
  134.                                             </div>
  135.                                         {% endif %}
  136.                                     </div>
  137.                                 {% endif %}
  138.                             </div>
  139.                         {% endif %}
  140.                     </div>
  141.                 </div>
  142.                 {% if truck.applicationsShow %}
  143.                     <div class="detalle_bloque2" id="aplicaciones">
  144.                         <h2>Aplicaciones</h2>
  145.                         <p>{{ truck.applicationsText|markdown_only_strong }}</p>
  146.                         <div class="detalle_bloque2_wrap">
  147.                             {% for item in truck.applicationsItems %}
  148.                                 <div class="detalle_bloque2_item">
  149.                                     <figure>
  150.                                         <img src="{{ asset(item.image|image_path) }}" width="" height="" alt="{{ item.image|split_alt }}">
  151.                                     </figure>
  152.                                     <h3>{{ item.title }}</h3>
  153.                                 </div>
  154.                             {% endfor %}
  155.                         </div>
  156.                     </div>
  157.                 {% endif %}
  158.                 {% if truck.attributesShow %}
  159.                     <div class="detalle_bloque3" id="atributos">
  160.                         <h2>Atributos</h2>
  161.                         <div class="detalle_bloque3_nav">
  162.                             <div class="detalleSliderListadoJs">
  163.                                 <ul class="swiper-wrapper">
  164.                                     {% for item in truck.attributesItems %}
  165.                                         <li class="swiper-slide"><a class="detalle_bloque3_tab_nav" onclick="tabContent(event, 'detalle_bloque3_tab_content-{{ loop.index }}')" href="">{{ item.attribute }}</a></li>
  166.                                     {% endfor %}
  167.                                 </ul>
  168.                                 <div class="swiper-scrollbar"></div>
  169.                                 <div class="detalle_listado_controls">
  170.                                     <div class="detalle_listado_prev icon-arrow_back_ios"></div>
  171.                                     <div class="detalle_listado_next icon-arrow_forward_ios"></div>
  172.                                 </div>
  173.                             </div>
  174.                         </div>
  175.                         <div class="detalle_bloque3_info">
  176.                             {% for item in truck.attributesItems %}
  177.                                 <div class="detalle_bloque3_tab_content" id="detalle_bloque3_tab_content-{{ loop.index }}">
  178.                                     <div class="detalle_bloque3_txt">
  179.                                         <h3>{{ item.title }}</h3>
  180.                                         <p>{{ item.text|nl2br }}</p>
  181.                                     </div>
  182.                                     <figure class="detalle_bloque3_fig">
  183.                                         <img src="{{ asset(item.image|image_path) }}" width="" height="" alt="{{ item.image|split_alt }}">
  184.                                     </figure>
  185.                                     {% if item.source %}
  186.                                         <div class="detalle_bloque3_fuente">
  187.                                             <p>Fuente: <a href="{{ item.source|external_url }}" target="_blank">{{ item.source|external_url }}</a></p>
  188.                                         </div>
  189.                                     {% endif %}
  190.                                 </div>
  191.                             {% endfor %}
  192.                         </div>
  193.                     </div>
  194.                 {% endif %}
  195.                 {% if truck.technicalDatasheetShow %}
  196.                     <div class="detalle_bloque4" id="fichatecnica">
  197.                         <h2>Ficha Técnica</h2>
  198.                         <div class="detalle_bloque4_select">
  199.                             <select name="" id="">
  200.                                 {% for item in truck.technicalDatasheetItems %}
  201.                                     <option value="{{ loop.index - 1 }}">{{ item.title }}</option>
  202.                                 {% endfor %}
  203.                             </select>
  204.                             <span class="icon-arrow_drop_down"></span>
  205.                         </div>
  206.                         <div class="detalle_bloque4_table">
  207.                             {% for item in truck.technicalDatasheetItems %}
  208.                                 <div class="detalle_bloque4_row_table" style="display:none;">
  209.                                     {{ item.text|only_table }}
  210.                                 </div>
  211.                             {% endfor %}
  212.                             {% if truck.technicalDatasheetFile|image_path %}
  213.                                 <div class="detalle_bloque4_btn">
  214.                                     <a href="{{ asset(truck.technicalDatasheetFile|image_path) }}" download>Descargar Ficha <span class="icon-download"></span></a>
  215.                                 </div>
  216.                             {% endif %}
  217.                         </div>
  218.                     </div>
  219.                 {% endif %}
  220.             </div>
  221.             <!--FORMULARIO-->
  222.             <div class="detalle_listado_container_rigth sticky" data-margin-top="70" data-sticky-for="1025">
  223.                 <h2>Me interesa</h2>
  224.                 {{ form_start(form, {'attr': {'id': 'formDetalle'}}) }}
  225.                     {% include 'front/templates/form_utm_fields.html.twig' %}
  226.                     {{ form_widget(form.typePerson) }}
  227.                     {{ form_widget(form.documentType) }}
  228.                     {{ form_widget(form.documentNumber) }}
  229.                     {{ form_widget(form.model) }}
  230.                     <ul>
  231.                         <li class="detalle_listado_form_head">
  232.                             <div class="detalle_listado_check_radio">
  233.                                 <div class="contacto_tab_radio">
  234.                                     <input checked type="radio" name="form_type" class="checkedInput" value="Empresa" id="form_truck_legal_person">
  235.                                     <label for="form_truck_legal_person">Soy empresa</label>
  236.                                 </div>
  237.                                 <div class="contacto_tab_radio" style="margin-right:0px;">
  238.                                     <input type="radio" name="form_type" class="checkedInput" value="Persona natural" id="form_truck_natural_person">
  239.                                     <label for="form_truck_natural_person">Soy Persona Natural</label>
  240.                                 </div>
  241.                             </div>
  242.                         </li>
  243.                         <li class="noneInputsEmpresa">
  244.                             <div class="detalle_listado_inputs">
  245.                                 <div class="detalle_input_box">
  246.                                     <input type="text" class="form_notActive inputEffect form_notActive validate[required] form_truck_document_number soloNumber" id="form_truck_document_number_legal_person">
  247.                                     <label for="form_truck_document_number_legal_person">RUC *</label>
  248.                                 </div>
  249.                                 <div class="detalle_input_box">
  250.                                     {{ form_widget(form.company, {'attr': {'class': 'form_notActive inputEffect form_notActive validate[required]'}}) }}
  251.                                     <label for="form_truck_company">Empresa *</label>
  252.                                 </div>
  253.                             </div>
  254.                         </li>
  255.                         <li class="noneInputs">
  256.                             <div class="detalle_listado_inputs">
  257.                                 <div class="detalle_input_box">
  258.                                     <select id="form_truck_document_types" class="inputEffect validate[required]">
  259.                                         <option value="" disabled selected></option>
  260.                                         {% for item in forms.documentTypes %}
  261.                                             <option value="{{ item.title }}">{{ item.title }}</option>
  262.                                         {% endfor %}
  263.                                     </select>
  264.                                     <label for="form_truck_document_types">Tipo de documento *<span class="icon-arrow_drop_down"></span></label>
  265.                                 </div>
  266.                                 <div class="detalle_input_box">
  267.                                     <input type="text" id="form_truck_document_number_natural_person" class="form_isActive inputEffect soloNumber form_isActive validate[required] form_truck_document_number">
  268.                                     <label for="form_truck_document_number_natural_person">Número de documento *</label>
  269.                                 </div>
  270.                             </div>
  271.                         </li>
  272.                         <li>
  273.                             <div class="detalle_listado_inputs">
  274.                                 <div class="detalle_input_box">
  275.                                     {{ form_widget(form.name, {'attr': {'class': 'inputEffect validate[required]'}}) }}
  276.                                     <label for="form_truck_name">Nombres *</label>
  277.                                 </div>
  278.                                 <div class="detalle_input_box">
  279.                                     {{ form_widget(form.lastname, {'attr': {'class': 'inputEffect validate[required]'}}) }}
  280.                                     <label for="form_truck_lastname">Apellidos *</label>
  281.                                 </div>
  282.                             </div>
  283.                         </li>
  284.                         <li>
  285.                             <div class="detalle_listado_inputs">
  286.                                 <div class="detalle_input_box">
  287.                                     {{ form_widget(form.department, {'attr': {'class': 'inputEffect validate[required]'}}) }}
  288.                                     <label for="form_truck_department">Departamento *</label>
  289.                                 </div>
  290.                                 <div class="detalle_input_box">
  291.                                     {{ form_widget(form.phone, {'attr': {'class': 'inputEffect soloNumber validate[required, custom[phone]]'}}) }}
  292.                                     <label for="form_truck_phone">Teléfono *</label>
  293.                                 </div>
  294.                             </div>
  295.                         </li>
  296.                         <li>
  297.                             <div class="detalle_listado_inputs">
  298.                                 <div class="detalle_input_box">
  299.                                     {{ form_widget(form.email, {'attr': {'class': 'inputEffect  validate[required, custom[email]]'}}) }}
  300.                                     <label for="form_truck_email">Correo Electrónico *</label>
  301.                                 </div>
  302.                             </div>
  303.                         </li>
  304.                     </ul>
  305.                     <div class="detalle_listado_obligatorio">
  306.                         <p>* Campos obligatorios</p>
  307.                     </div>
  308.                     <div class="detalle_listado_check_input">
  309.                         <input type="checkbox" id="inputCheckDetalle" class="validate[required]" name="">
  310.                         <label for="inputCheckDetalle">
  311.                             <span></span>
  312.                             <p>He leído y acepto las <a href="{{ path('data_protection_policies') }}">Políticas de privacidad</a></p>
  313.                         </label>
  314.                     </div>
  315.                     <div class="detalle_listado_button">
  316.                         <button id="btnFormCamiones" class="btn btn_lightblue" href="">Enviar</button>
  317.                     </div>
  318.                 {{ form_end(form) }}
  319.             </div>
  320.         </div>
  321.         {% if truck.additionalShow %}
  322.             <div class="detalle_listado_videos ww_center">
  323.                 {% if truck.additionalTitle %}
  324.                     <h2>{{ truck.additionalTitle }}</h2>
  325.                 {% endif %}
  326.                 <ul class="" id="galleryVideos">
  327.                     {% for item in truck.additionalItems %}
  328.                         {% if item.video|youtube_id %}
  329.                             <li>
  330.                                 <a href="https://www.youtube.com/watch?v={{ item.video|youtube_id }}" class="detalle_listado_video_itm">
  331.                                     <figure>
  332.                                         <img src="{{ asset(item.image|image_path) }}" width="" height="" alt="{{ item.image|split_alt }}">
  333.                                     </figure>
  334.                                 </a>
  335.                             </li>
  336.                         {% endif %}
  337.                     {% endfor %}
  338.                 </ul>
  339.             </div>
  340.         {% endif %}
  341.     </section>
  342. {% endblock %}
  343. {% block jsfinal %}
  344.     <script src="{{ asset('static/js/sticky.js') }}"></script>
  345.     <script src="{{ asset('static/js/slick/slick.min.js') }}"></script>
  346.     <script src="{{ asset('static/js/lightgallery/lightgallery.js') }}"></script>
  347.     <script src="{{ asset('static/js/lightgallery/lg-video.js') }}"></script>
  348.     <script src="{{ asset('static/js/lightgallery/lg-autoplay.js') }}"></script>
  349.     <script src="{{ asset('static/js/lightgallery/jquery.mousewheel.min.js') }}"></script>
  350.     <script src="{{ asset('static/js/validationform/jquery.validationEngine-es.js') }}"></script>
  351.     <script src="{{ asset('static/js/validationform/staff.validationEngine.js') }}"></script>
  352.     <script src="{{ asset('static/js/navHeader.js') }}"></script>
  353.     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  354.     <script type="text/javascript">
  355.         var swiper = new Swiper(".detalleSliderListadoJs", {
  356.             slidesPerView: 4,
  357.             scrollbar: {
  358.                 el: ".swiper-scrollbar",
  359.                 hide: true,
  360.             },
  361.             navigation: {
  362.                 nextEl: ".detalle_listado_next",
  363.                 prevEl: ".detalle_listado_prev",
  364.             },
  365.             breakpoints: {
  366.                 320: {
  367.                     slidesPerView: 2,
  368.                     spaceBetween: 0,
  369.                 },
  370.                 768: {
  371.                     slidesPerView: 4,
  372.                     spaceBetween: 0,
  373.                 },
  374.                 960: {
  375.                     slidesPerView: 5,
  376.                     spaceBetween: 0,
  377.                 },
  378.             },
  379.         });
  380.         var sticky = new Sticky('.sticky');
  381.         let InputChecked = document.querySelectorAll('.checkedInput');
  382.         let elementDivHidden = document.querySelectorAll('.form_isActive');
  383.         let elementDivVisible = document.querySelectorAll('.form_notActive');
  384.         InputChecked.forEach((item) => {
  385.             item.addEventListener('change', () => {
  386.                 if (item.value === 'Empresa') {
  387.                     elementDivHidden.forEach((el) => {
  388.                         el.disabled = true
  389.                         el.closest('.noneInputs').style.display = 'none'
  390.                     })
  391.                     elementDivVisible.forEach((el) => {
  392.                         el.disabled = false
  393.                         el.closest('.noneInputsEmpresa').style.display = 'block'
  394.                     })
  395.                 } else {
  396.                     elementDivHidden.forEach((el) => {
  397.                         el.disabled = false
  398.                         el.closest('.noneInputs').style.display = 'block'
  399.                     })
  400.                     elementDivVisible.forEach((el) => {
  401.                         el.disabled = true
  402.                         el.closest('.noneInputsEmpresa').style.display = 'none'
  403.                     })
  404.                 }
  405.             })
  406.         })
  407.         {# $("#galleryVideos").lightGallery(); #}
  408.         $('#galleryVideos').lightGallery({
  409.             selector: 'a',
  410.             videoMaxWidth: '90%',
  411.             thumbnail: false,
  412.             fullScreen: true,
  413.             download: false,
  414.             counter: false,
  415.             zoom: false
  416.         });
  417.         function tabContent(evt, content) {
  418.             var i, tabcontent, tablinks;
  419.             evt.preventDefault();
  420.             tabcontent = document.getElementsByClassName("detalle_bloque3_tab_content");
  421.             for (i = 0; i < tabcontent.length; i++) {
  422.                 tabcontent[i].classList.remove('active')
  423.             }
  424.             tablinks = document.getElementsByClassName("detalle_bloque3_tab_nav");
  425.             for (i = 0; i < tablinks.length; i++) {
  426.                 tablinks[i].className = tablinks[i].className.replace(" active", "");
  427.             }
  428.             document.getElementById(content).classList.add('active')
  429.             evt.currentTarget.className += " active";
  430.         }
  431.         var tabs = document.querySelectorAll('.detalle_bloque3_tab_nav')
  432.         if( tabs.length > 0) {
  433.             tabs[0].click();
  434.         }
  435.         //+++ INICIO B1DETALLE +++
  436.         $('.b1detalleSliderBig').slick({
  437.             slidesToShow: 1,
  438.             slidesToScroll: 1,
  439.             arrows: false,
  440.             fade: true,
  441.             dots: false,
  442.             asNavFor: '.b1detalleSliderMini',
  443.             responsive: [
  444.                 {
  445.                     breakpoint: 768,
  446.                     settings: {
  447.                         arrows: true,
  448.                         prevArrow: '.b1detalle_big_prev',
  449.                         nextArrow: '.b1detalle_big_next'
  450.                     }
  451.                 }
  452.             ]
  453.         });
  454.         $('.b1detalleSliderMini').slick({
  455.             vertical: true,
  456.             slidesToShow: 3,
  457.             slidesToScroll: 1,
  458.             asNavFor: '.b1detalleSliderBig',
  459.             dots: false,
  460.             centerMode: false,
  461.             focusOnSelect: true,
  462.             arrows: true,
  463.             prevArrow: '.b1detalle_mini_prev',
  464.             nextArrow: '.b1detalle_mini_next',
  465.             responsive: [
  466.                 {
  467.                     breakpoint: 961,
  468.                     settings: {
  469.                         vertical: false,
  470.                         slidesToShow: 3,
  471.                         slidesToScroll: 1,
  472.                         //- dots: false,
  473.                         //- centerMode: false,
  474.                         //- focusOnSelect: true,
  475.                     }
  476.                 },
  477.                 {
  478.                     breakpoint: 768,
  479.                     settings: {
  480.                         vertical: false,
  481.                         slidesToShow: 3,
  482.                         slidesToScroll: 1,
  483.                         arrows: true
  484.                     }
  485.                 }
  486.             ]
  487.         });
  488.         //<<< FIN B1DETALLE >>>
  489.         {# SELECT FICHA TECNICA #}
  490.           $('.detalle_bloque4_row_table').eq(0).show();
  491.           $('.detalle_bloque4_select select').change(function(e){
  492.               var dataValue = $(this).val();
  493.               $('.detalle_bloque4_row_table').hide();
  494.               $('.detalle_bloque4_row_table').eq(dataValue).show();
  495.           })
  496.         {# END #}
  497.         {# +++ CAMPOS FORM +++ #}
  498.         const detailFields = $(".detalle_input_box input, .detalle_input_box select");
  499.         $(detailFields).focusin(function() {
  500.             $(this).addClass('border');
  501.         });
  502.         $(detailFields).focusout(function() {
  503.             if ($(this).val() === "") {
  504.                 $(this).removeClass('border');
  505.             }
  506.         });
  507.         $(detailFields).each(function() {
  508.             if ($(this).val()) {
  509.                 $(this).addClass('border');
  510.             }
  511.         });
  512.         $('.soloNumber').keypress(validateNumber);
  513.         function validateNumber(event) {
  514.             const key = window.event ? event.keyCode : event.which;
  515.             if (event.keyCode === 8 || event.keyCode === 46) {
  516.                 return true;
  517.             } else return !(key < 48 || key > 57);
  518.         }
  519.         {# END #}
  520.         $('#form_truck_legal_person').on('change', function () {
  521.             $('#form_truck_typePerson').val($(this).val());
  522.             $('#form_truck_document_types').val('');
  523.             $('#form_truck_document_number_natural_person').val('');
  524.             $('#form_truck_document_number_legal_person').val('');
  525.             $('#form_truck_documentType').val('RUC');
  526.             $('#form_truck_documentNumber').val('');
  527.             $('#form_truck_company').val('');
  528.         })
  529.         $('#form_truck_natural_person').on('change', function () {
  530.             $('#form_truck_typePerson').val($(this).val());
  531.             $('#form_truck_document_types').val('');
  532.             $('#form_truck_document_number_natural_person').val('');
  533.             $('#form_truck_document_number_legal_person').val('');
  534.             $('#form_truck_documentType').val('');
  535.             $('#form_truck_documentNumber').val('');
  536.         })
  537.         $('#form_truck_legal_person').trigger('change');
  538.         $('.form_truck_document_number').on('keyup', function () {
  539.             $('#form_truck_documentNumber').val($(this).val());
  540.         })
  541.         $('#form_truck_document_types').on('change', function () {
  542.             $('#form_truck_documentType').val($(this).val());
  543.         })
  544.         $('#form_truck_models').on('change', function () {
  545.             $('#form_truck_model').val($(this).find('option:selected').data('value'));
  546.         })
  547.         $('#form_truck_model').val('{{ truck.title }}');
  548.         const form_truck = $('#formDetalle');
  549.         const form_truck_button = $('#btnFormCamiones');
  550.         form_truck.validationEngine('attach', {
  551.             promptPosition: "topLeft",
  552.             autoHidePrompt: true,
  553.             autoHideDelay: 3000,
  554.             binded: false,
  555.             scroll: false
  556.         });
  557.         form_truck_button.on('click', function (event) {
  558.             event.preventDefault();
  559.             const valid = form_truck.validationEngine('validate');
  560.             if (valid) {
  561.                 form_truck.submit();
  562.             }
  563.         });
  564.         let div = document.querySelector('.detalle_listado_container_rigth');
  565.         function myFunction(x) {
  566.             if (x.matches) {
  567.                 document.querySelector('.b1detalle_listado_form').appendChild(div)
  568.             } else {
  569.                 document.querySelector('.detalle_listado_container_center').appendChild(div)
  570.             }
  571.         }
  572.         var x = window.matchMedia("(max-width: 1024px)")
  573.         myFunction(x)
  574.         x.addListener(myFunction)
  575.     </script>
  576. {% endblock %}