templates/homepage/detailVehicle.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ vehicle_seo_title(vehicle) }}{% endblock %}
  5. {% block desc %}{{ vehicle_seo_description(vehicle) }}{% endblock %}
  7.         {% block javascripts %}
  8.             {{ encore_entry_script_tags('app') }}
  9.             <script src="https://www.google.com/recaptcha/api.js?render={{ google_recaptcha_site_key }}"></script>
  10.         {% endblock %}
  12.     {% block mobileBranding %} {% endblock %}
  13. {% block body %}
  15.     <br>
  16.     <section class="container">
  17.         <nav class="container__back">
  18.             {% if vehicle.kind %}
  19.             <a class="container__back-link" href="{{ app.request.headers.get('referer') }}">Zpět na seznam inzerátů</a>
  20.             {% endif %}
  21.         </nav>
  22.         <section class="gallery js-gallery">
  23.             {% for img in vehicle.vehicleImages %}
  25.               {% if loop.index < 2 %}
  26.             <a class="gallery__item gallery__item--large" href="{{ asset(vehicle_image_url(img)) }}" title="{{ vehicle_image_alt(img) }}">
  27.                 <img  src="{{ asset(vehicle_image_url(img)) }}"
  28.                         alt="{{ vehicle_image_alt(img) }}"
  29.                         {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
  30.                             src: asset(vehicle_image_url(img))
  31.                         }) }} width="400" >
  32.                 {#
  33.                 <div class="gallery__favorite">
  34.                     <i class="icon icon-heart"></i>
  35.                 </div>
  36.                 #}
  37.             </a>
  38.              {% else  %}
  39.             <a  {% if loop.index > 5 %}  style="display: none" {% endif %} class="gallery__item   {% if loop.index == 5 %}  gallery__item--hidden-sm  {% endif %} " href="{{ asset(vehicle_image_url(img)) }}" title="{{ vehicle_image_alt(img) }}">
  40.                 <img src="{{ asset(vehicle_image_url(img)) }}"
  41.                         alt="{{ vehicle_image_alt(img) }}"
  42.                         {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
  43.                             src: asset(vehicle_image_url(img))
  44.                         }) }} width="200" > </a>
  45.             {% endif  %}
  47.             {% endfor %}
  48.             {% if vehicle.vehicleImages|length > 5 %}
  49.             <div class="gallery__show">
  50.                 <i class="icon icon-camera"></i>
  51.                 +{{ vehicle.vehicleImages|length - 5 }}
  52.             </div>
  53.             {% endif  %}
  54.         </section>
  55.     </section>
  57.     <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" aria-label="image gallery"
  58.          aria-modal="true" role="dialog">
  59.         <div class="slides" aria-live="polite"></div>
  60.         <a class="prev" aria-controls="blueimp-gallery" aria-label="previous slide" aria-keyshortcuts="ArrowLeft"></a>
  61.         <a class="next" aria-controls="blueimp-gallery" aria-label="next slide" aria-keyshortcuts="ArrowRight"></a>
  62.         <a class="close" aria-controls="blueimp-gallery" aria-label="close" aria-keyshortcuts="Escape"></a>
  64.     </div>
  69.     <section class="grid grid--gap40 grid--row-gap20 grid--padding-top0">
  70.         <div>
  71.             <section class="detail">
  72.                 <h1 class="margin-bottom-0">{{ vehicle_seo_h1(vehicle) }}</h1>
  73.                 <div class="detail__price">
  74.                     {{  vehicle.price ? vehicle.price|number_format(0, null, ' ')~' Kč' : 'dohodou' }}
  75.                     {% if vehicle.vat %}
  76.                     <div class="detail__price-label">Odpočet DPH možný</div>
  77.                     {% endif %}
  78.                 </div>
  79.                 <div class="detail__info">
  80.                     <div class="detail__info-item">
  81.                         Rok výroby
  82.                         <strong class="detail__info-strong">
  83.                             <i class="icon icon-calendar"></i>
  84.                             {{ vehicle.madeDate ? vehicle.madeDate|slice(0,4) : 'neuvedeno' }}
  85.                         </strong>
  86.                     </div>
  87.                     <div class="detail__info-item">
  88.                         Tachometr
  89.                         <strong class="detail__info-strong">
  90.                             <i class="icon icon-tachometer"></i>
  91.                             {{ vehicle.mileage ? vehicle.mileage|number_format(null, ' ', ' ') ~' '~vehicle.mileageUnit  : 'neuvedeno' }}
  92.                         </strong>
  93.                     </div>
  94.                     <div class="detail__info-item">
  95.                         Palivo
  96.                         <strong class="detail__info-strong">
  97.                             <i class="icon icon-gas"></i>
  98.                             {{ vehicle.fuel ? vehicle.fuel.name : 'neuvedeno' }}
  99.                         </strong>
  100.                     </div>
  101.                     <div class="detail__info-item">
  102.                         Převodovka
  103.                         <strong class="detail__info-strong">
  104.                             <i class="icon icon-settings"></i>
  105.                             {{  vehicle.gearbox  ?  vehicle.gearbox|trans  : 'neuvedeno' }}
  106.                         </strong>
  107.                     </div>
  108.                     <div class="detail__info-item">
  109.                         Výkon
  110.                         <strong class="detail__info-strong">
  111.                             <i class="icon icon-power"></i>
  112.                             {{ vehicle.enginePower ? vehicle.enginePower ~' kW' : 'neuvedeno' }}
  113.                         </strong>
  114.                     </div>
  115.                     <div class="detail__info-item">
  116.                         Karoserie
  117.                         <strong class="detail__info-strong">
  118.                             <i class="icon icon-car"></i>
  119.                             {{ vehicle.body ? vehicle.body.name : 'neuvedeno' }}
  120.                         </strong>
  121.                     </div>
  122.                 </div>
  123.                 <h2>Popis</h2>
  125.                 <div class="detail__more js-detail__more">
  126.                     <div class="detail__more-content js-detail__more-content">
  127.                         <p> {{ vehicle.note }} </p>
  128.                     </div>
  129.                     <div class="detail__more-control">
  130.                         <button class="button detail__more-toggler js-detail__more-toggler" type="button">
  131.                             <span class="detail__more-toggler-show">Zobrazit více</span>
  132.                             <span class="detail__more-toggler-hide">Zobrazit méně</span>
  133.                         </button>
  134.                     </div>
  135.                 </div>
  137.                 <h2>Informace o vozu</h2>
  139.                 <div class="detail__columns detail__hidden--mobile">
  140.                     <table>
  141.                         <tbody>
  142.                         <tr>
  143.                             <th>Prodejní cena</th>
  144.                             <td> {{ vehicle.price ? vehicle.price|number_format(0, null, ' ')~' Kč' : 'dohodou' }}</td>
  145.                         </tr>
  146.                         {% if  vehicle.vat %}
  147.                         <tr>
  148.                             <th> Cena bez DPH</th>
  149.                             <td>
  150.                                 {% if  vehicle.price %}
  151.                                     {{ (vehicle.price / 1.21)|number_format(0, null, ' ')  }}  Kč
  152.                                 {% else %}
  153.                                     neuvedeno
  154.                                 {% endif  %} </td>
  155.                         </tr>
  156.                         {% endif %}
  157.                         <tr>
  158.                             <th>Odpočet DPH  </th>
  159.                             <td>{{ vehicle.vat ? 'ano' : 'ne' }} </td>
  160.                         </tr>
  161.                         <tr>
  162.                             <th> VIN</th>
  163.                             <td> {{ vehicle.vin ? vehicle.vin : 'neuvedeno' }}</td>
  164.                         </tr>
  165.                         {% if vehicle.dealer.checkVin %}
  166.                             <tr>
  167.                                 <th>Historie</th>
  168.                                 <td>
  169.                                     <a target="_blank"
  170.                                        href="https://cz.cebia.com/?utm_source=affilbox&utm_medium=affiliate&utm_campaign=Autanet_2013&a_box=j49grgww&vin={{ vehicle.vin }}"
  171.                                     >Zobrazit historii vozu</a>
  172.                                 </td>
  173.                             </tr>
  174.                         {% endif %}
  175.                         <tr>
  176.                             <th>Tachometr</th>
  177.                             <td>  {{ vehicle.mileage ? vehicle.mileage~' '~vehicle.mileageUnit : 'neuvedeno' }}  </td>
  178.                         </tr>
  179.                         <tr>
  180.                             <th>Druh paliva</th>
  181.                             <td>          {{ vehicle.fuel ? vehicle.fuel.name : 'neuvedeno' }}</td>
  182.                         </tr>
  183.                         <tr>
  184.                             <th>Objem</th>
  185.                             <td>
  186.                                 {{ vehicle.engineVolume ? vehicle.engineVolume~' ccm'  : 'neuvedeno' }} </td>
  187.                         </tr>
  188.                         </tbody>
  189.                     </table>
  190.                     <table>
  191.                         <tbody>
  192.                         <tr>
  193.                             <th>Karoserie</th>
  194.                             <td>  {{ vehicle.body  ? vehicle.body.name   : 'neuvedeno' }}</td>
  195.                         </tr>
  196.                         <tr>
  197.                             <th>Počet dveří</th>
  198.                             <td> {{ vehicle.doors  ? vehicle.doors  : 'neuvedeno' }}</td>
  199.                         </tr>
  200.                         <tr>
  201.                             <th>Počet míst</th>
  202.                             <td>   {{ vehicle.places  ? vehicle.places  : 'neuvedeno' }} </td>
  203.                         </tr>
  204.                         <tr>
  205.                             <th>Barva</th>
  206.                             <td>{{  vehicle.color.name }}   </td>
  207.                         </tr>
  208.                         <tr>
  209.                             <th>STK {% if vehicle.stkTo != 1 %}{{ vehicle.stkTo }}{% endif %}</th>
  210.                             <td>{% if vehicle.stkTo == 1 %}neuvedeno{% else %}{{  vehicle.stkTo ? vehicle.stkTo|slice(4,6)~'/'~vehicle.stkTo|slice(0,4)  : 'neuvedeno' }}{% endif %}  </td>
  211.                         </tr>
  212.                         <tr>
  213.                             <th>Země původu</th>
  214.                             <td>{{ vehicle.state ? vehicle.state : 'neuvedeno' }}  </td>
  215.                         </tr>
  216.                         <tr>
  217.                             <th>První majitel</th>
  218.                             <td>{{ vehicle.firstOwner ? 'ano' : 'ne' }}</td>
  219.                         </tr>
  220.                         </tbody>
  221.                     </table>
  222.                 </div>
  223.                 <div class="detail__hidden--desktop">
  224.                     <table>
  225.                         <tbody>
  226.                         <tr>
  227.                             <th>Prodejní cena</th>
  228.                             <td> {{ vehicle.price ? vehicle.price|number_format(0, null, ' ')~' Kč' : 'neuvedeno' }}</td>
  229.                         </tr>
  230.                         {% if  vehicle.vat %}
  231.                         <tr>
  232.                             <th> Cena bez DPH</th>
  233.                             <td>
  234.                                 {% if  vehicle.price %}
  235.                                     {{ (vehicle.price / 1.21)|number_format(0, null, ' ')  }}  Kč
  236.                                 {% else %}
  237.                                     neuvedeno
  238.                                 {% endif  %} </td>
  239.                         </tr>
  240.                         {% endif %}
  241.                         <tr>
  242.                             <th>Odpočet DPH</th>
  243.                             <td>{{ vehicle.vat ? 'ano' : 'ne' }} </td>
  244.                         </tr>
  245.                         <tr>
  246.                             <th> VIN</th>
  247.                             <td> {{ vehicle.vin ? vehicle.vin : 'neuvedeno' }}</td>
  248.                         </tr>
  249.                         {% if vehicle.dealer.checkVin %}
  250.                             <tr>
  251.                                 <th>Historie</th>
  252.                                 <td>
  253.                                     <a target="_blank"
  254.                                        href="https://cz.cebia.com/?utm_source=affilbox&utm_medium=affiliate&utm_campaign=Autanet_2013&a_box=j49grgww&vin={{ vehicle.vin }}"
  255.                                     >Zobrazit historii vozu</a>
  256.                                 </td>
  257.                             </tr>
  258.                         {% endif %}
  259.                         <tr>
  260.                             <th>Tachometr</th>
  261.                             <td>  {{ vehicle.mileage ? vehicle.mileage~' '~vehicle.mileageUnit : 'neuvedeno' }}  </td>
  262.                         </tr>
  263.                         <tr>
  264.                             <th>Druh paliva</th>
  265.                             <td>          {{ vehicle.fuel ? vehicle.fuel.name : 'neuvedeno' }}</td>
  266.                         </tr>
  267.                         <tr>
  268.                             <th>Objem</th>
  269.                             <td>
  270.                                 {{ vehicle.engineVolume ? vehicle.engineVolume~' ccm'  : 'neuvedeno' }} </td>
  271.                         </tr>
  273.                         <tr>
  274.                             <th>Karoserie</th>
  275.                             <td>  {{ vehicle.body  ? vehicle.body.name   : 'neuvedeno' }}</td>
  276.                         </tr>
  277.                         <tr>
  278.                             <th>Počet dveří</th>
  279.                             <td> {{ vehicle.doors  ? vehicle.doors  : 'neuvedeno' }}</td>
  280.                         </tr>
  281.                         <tr>
  282.                             <th>Počet míst</th>
  283.                             <td>   {{ vehicle.places  ? vehicle.places  : 'neuvedeno' }} </td>
  284.                         </tr>
  285.                         <tr>
  286.                             <th>Barva</th>
  287.                             <td>{{  vehicle.color.name }}   </td>
  288.                         </tr>
  289.                         <tr>
  290.                             <th>STK {% if vehicle.stkTo != 1 %}{{ vehicle.stkTo }}{% endif %}</th>
  291.                             <td>{% if vehicle.stkTo == 1 %}neuvedeno{% else %}{{  vehicle.stkTo ? vehicle.stkTo|slice(4,6)~'/'~vehicle.stkTo|slice(0,4)  : 'neuvedeno' }}{% endif %}  </td>
  292.                         </tr>
  293.                         <tr>
  294.                             <th>Země původu</th>
  295.                             <td>{{ vehicle.state ? vehicle.state : 'neuvedeno' }}  </td>
  296.                         </tr>
  297.                         <tr>
  298.                             <th>První majitel</th>
  299.                             <td>{{ vehicle.firstOwner ? 'ano' : 'ne' }}</td>
  300.                         </tr>
  301.                         </tbody>
  302.                     </table>
  303.                 </div>
  308.                 <h2>Výbava vozu</h2>
  310.                 <div class="detail__more js-detail__more">
  311.                     <div class="detail__more-content js-detail__more-content">
  312.                         <div class="detail__columns">
  313.                             <ul>
  314.                             {% for e in vehicle.equipments %}
  315.                                 <li>{{ e.name }}</li>
  316.                                 {% if (vehicle.equipments|length / 2)|round == loop.index  %}
  317.                                     </ul>  <ul>
  318.                                 {% endif %}
  319.                             {% endfor  %}
  320.                            </ul>
  321.                         </div>
  322.                     </div>
  323.                     <div class="detail__more-control">
  324.                         <button class="button detail__more-toggler js-detail__more-toggler" type="button">
  325.                             <span class="detail__more-toggler-show">Zobrazit více</span>
  326.                             <span class="detail__more-toggler-hide">Zobrazit méně</span>
  327.                         </button>
  328.                     </div>
  329.                 </div>
  331.             </section>
  332.             
  333.             <!-- Mobile contact section -->
  334.             <div class="dealer dealer--mobile" style="display: none;">
  335.                 <h2>Kontakt na prodejce</h2>
  336.                 {% if not vehicle.dealer.basicAdvertising %}
  337.                 <figure class="dealer__logo">
  338.                     {% if vehicle.dealer.logo %}
  339.                         <img
  340.                                 src="{{ asset('img-dealer/')~vehicle.dealer.logo    }}"
  341.                                 {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
  342.                                     src: asset('img-dealer/')~vehicle.dealer.logo
  343.                                 }) }}
  344.                                 width="170"
  345.                         >
  346.                     {% endif  %}
  347.                 </figure>
  348.                 {% endif %}
  349.                 <h3>{{ vehicle.dealer.name }}</h3>
  350.                 <p>{{ vehicle.dealer.street }}, {{ vehicle.dealer.city }}<br>
  351.                     {{ vehicle.dealer.district.name }}</p>
  352.                 <a class="dealer__link" href="https://www.google.com/maps/search/?api=1&query={{ vehicle.dealer.lat }},{{ vehicle.dealer.lng }}" target="_blank">
  353.                     <i class="icon icon-map"></i>
  354.                     Zobrazit na mapě</a>
  355.                 <div class="dealer__opening-hours">
  356.                     <h4 class="detail__opening-hours-heading">
  357.                         <i class="icon icon-hours"></i>
  358.                         Provozní doba
  359.                     </h4>
  360.                     <div class="dealer__opening">
  361.                         {% for t in  openTime %}
  362.                             <div>{{ t.day.value }}</div>
  363.                             <div>{{ t.description }}</div>
  364.                         {% endfor %}
  365.                     </div>
  366.                 </div>
  367.                 <a class="dealer__button dealer__button--green js-modal-show" href="#modal--call">
  368.                     <i class="icon icon-phone"></i>
  369.                     Zavolat prodejci</a>
  370.                 <a class="dealer__button js-modal-show" href="#modal--write">
  371.                     <i class="icon icon-email"></i>
  372.                     Napsat prodejci
  373.                 </a>
  374.             </div>
  375.             
  376.             {% if vehicleOthers|length >  0 %}
  377.             <h4 class="detail__dealer-vehicles-heading">Další inzeráty prodejce</h4>
  379.             {% for v in vehicleOthers %}
  380.                 {% include 'vehicle/_vehicle.html.twig' with { vehicle: v } %}
  382.                 {% if loop.index == 1 %}
  383.                     <div id="banner-mobile-container" class="banner-mobile"></div>
  384.                 {%  endif %}
  386.                 {% if loop.index == 2 %}
  387.                     <div id="adform_squarem"></div>
  388.                 {%  endif %}
  390.                 {% if loop.index == 8 %}
  391.                     <div id="adform_squarem2"></div>
  392.                 {%  endif %}
  394.             {% endfor  %}
  396.             {%  endif  %}
  398.             {% if not vehicle.dealer.basicAdvertising %}
  399.             <footer class="grid__buttons">
  400.                 <a class="button" href="{{ path('page_dealer_vehicle', { url: vehicle.dealer.url }) }}">
  401.                     Zobrazit všechny inzeráty prodejce
  402.                     <i class="icon icon-chevron-right"></i>
  403.                 </a>
  404.             </footer>
  405.             {% endif %}
  407.             <hr>
  408.         </div>
  409.         <div>
  410.             <div class="grid__buttons">
  411.                 {#
  412.                 <a class="button" href="">
  413.                     Přidat k oblíbeným
  414.                     <i class="icon icon-heart"></i>
  415.                 </a>
  416.                 #}
  418.                 <a class="button js-modal-show" href="#modal--share">
  419.                     Sdílet inzerát
  420.                     <i class="icon icon-forward"></i>
  421.                 </a>
  423.             </div>
  425.             <div class="dealer">
  426.                 <h2>Kontakt na prodejce</h2>
  427.                 {% if not vehicle.dealer.basicAdvertising %}
  428.                 <figure class="dealer__logo">
  429.                     {% if vehicle.dealer.logo %}
  430.                         <img
  431.                                 src="{{ asset('img-dealer/')~vehicle.dealer.logo    }}"
  432.                                 {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
  433.                                     src: asset('img-dealer/')~vehicle.dealer.logo
  434.                                 }) }}
  435.                                 width="170"
  436.                         >
  437.                     {% endif  %}
  438.                 </figure>
  439.                 {% endif %}
  440.                 <h3>{{ vehicle.dealer.name }}</h3>
  441.                 <p>{{ vehicle.dealer.street }}, {{ vehicle.dealer.city }}<br>
  442.                     {{ vehicle.dealer.district.name }}</p>
  443.                 <a class="dealer__link" href="https://www.google.com/maps/search/?api=1&query={{ vehicle.dealer.lat }},{{ vehicle.dealer.lng }}" target="_blank">
  444.                     <i class="icon icon-map"></i>
  445.                     Zobrazit na mapě</a>
  446.                 <div class="dealer__opening-hours">
  447.                     <h4 class="detail__opening-hours-heading">
  448.                         <i class="icon icon-hours"></i>
  449.                         Provozní doba
  450.                     </h4>
  451.                     <div class="dealer__opening">
  452.                         {% for t in  openTime %}
  453.                             <div>{{ t.day.value }}</div>
  454.                             <div>{{ t.description }}</div>
  455.                         {% endfor %}
  456.                     </div>
  457.                 </div>
  458.                 <a class="dealer__button dealer__button--green js-modal-show" href="#modal--call">
  459.                     <i class="icon icon-phone"></i>
  460.                     Zavolat prodejci</a>
  461.                 <a class="dealer__button js-modal-show" href="#modal--write">
  462.                     <i class="icon icon-email"></i>
  463.                     Napsat prodejci
  464.                 </a>
  465.             </div>
  467.             <div id="banner-container" class="banner"></div>
  468.             <div id="adform_halfpage"></div>
  470.         </div>
  472.     </section>
  475.     <div class="mobile-buttons">
  476.         <a class="mobile-buttons__item mobile-buttons__item--green js-modal-show" href="#modal--call">
  477.             <i class="icon icon-phone"></i>
  478.             Zavolat</a>
  479.         </a>
  480.         <a class="mobile-buttons__item js-modal-show" href="#modal--write">
  481.             <i class="icon icon-email"></i>
  482.             Napsat
  483.         </a>
  484.     </div>
  488.     <div class="modal" id="modal--share">
  489.         <div class="modal__overlay js-modal-close"></div>
  490.         <article class="modal__body">
  491.             <button class="modal__close js-modal-close" type="button"></button>
  492.             <div class="modal__header">
  493.                 <h2>Sdílet inzerci</h2>
  494.             </div>
  497.             <div class="share">
  498.                 <a target="_blank"  class="share__item" href="https://www.facebook.com/sharer/sharer.php?u={{ app.request.uri }}">
  499.                     <img src="{{ asset('img/share__icon--facebook.svg') }}" alt="">
  500.                     Facebook
  501.                 </a>
  503.                 <a target="_blank"  class="share__item" href="">
  504.                     <img src="{{ asset('img/share__icon--messenger.svg') }}" alt="fb-messenger://share/?link={{ app.request.uri }}">
  505.                     Messenger
  506.                 </a>
  509.                 <a target="_blank"  class="share__item" href="whatsapp://send?text={{ app.request.uri }}">
  510.                     <img src="{{ asset('img/share__icon--whatsapp.svg') }}" alt="">
  511.                     Whatsapp
  512.                 </a>
  513.                 <a target="_blank" class="share__item" href="https://twitter.com/intent/tweet?url={{ app.request.uri }}&text={{ vehicle_clean_name(vehicle) }} - {{  vehicle.madeDate|slice(0,4) }}, {{  vehicle.mileage }} {{  vehicle.mileageUnit }}">
  514.                     <img src="{{ asset('img/share__icon--twitter.svg') }}" alt="">
  515.                     Twitter
  516.                 </a>
  517.                 <a target="_blank"  class="share__item"
  518.                    href="mailto:?subject={{ vehicle_clean_name(vehicle) }} - {{ vehicle.madeDate|slice(0,4) }}, {{ vehicle.mileage }} {{ vehicle.mileageUnit }}&amp;body=Podívej se na {{ app.request.uri }}">
  519.                     <img src="{{ asset('img/share__icon--envelope.svg') }}" alt="">
  520.                     E-mail
  521.                 </a>
  524.             </div>
  525.             <footer class="modal__footer">
  526.                 <button class="modal__link js-modal-close" type="button">zavřít okno</button>
  527.             </footer>
  528.         </article>
  529.     </div>
  531.     <div class="modal" id="modal--call">
  532.         <div class="modal__overlay js-modal-close"></div>
  533.         <article class="modal__body">
  534.             <button class="modal__close js-modal-close" type="button"></button>
  535.             <div class="modal__header">
  536.                 <h2>Zavolat prodejci</h2>
  537.             </div>
  538.             <div class="share">
  539.                  {% for p in  vehicle.dealer.dealerPhones %}
  540.                 <a class="share__item" href="tel:{{ p.name }}">
  541.                     <img src="{{ asset('img/share__icon--phone.svg') }}" alt="telefon">
  542.                      {{ p.name }}
  543.                 </a>
  544.                 {% endfor %}
  545.             </div>
  546.             <footer class="modal__footer">
  547.                 <button class="modal__link js-modal-close" type="button">zavřít okno</button>
  548.             </footer>
  549.         </article>
  550.     </div>
  552.     <div class="modal" id="modal--write">
  553.         <div class="modal__overlay js-modal-close"></div>
  554.         <article class="modal__body modal__body--large">
  555.             <button class="modal__close js-modal-close" type="button"></button>
  556.             <div class="modal__header">
  557.                 <h2>Napsat prodejci</h2>
  558.             </div>
  559.             <section>
  560.                     <article>
  561.                         <form class="form">
  564.                             <input type="hidden" value="{{ vehicle.id }}" name="vehicleId">
  566.                             <div class="form__group form__group--strong">
  567.                                 <input placeholder="Vaše jméno" name="name" required>
  568.                             </div>
  569.                             <div class="form__group form__group--strong">
  570.                                 <input type="email" placeholder="Váš e-mail" name="email" required>
  571.                             </div>
  572.                             <div class="form__group form__group--strong">
  573.                                 <input type="tel" placeholder="Vaše telefonní číslo"  name="phone" required>
  574.                             </div>
  575.                             <div class="form__group form__group--strong">
  576.                 <textarea class="textarea_changer_target" placeholder="Vaše zpráva" rows="5"  name="message"
  577.                           data-variants='{
  578.                           "1":"Dobrý den, mám zájem o vaši nabídku „{{ vehicle_clean_name(vehicle) }} - Rok {{ vehicle.madeDate|slice(0,4) }}, {{ vehicle.mileage }} {{ vehicle.mileageUnit }}". Můžete mi prosím zavolat? Děkuji",
  579.                           "2":"Dobrý den, je vozidlo „{{ vehicle_clean_name(vehicle) }} - Rok {{ vehicle.madeDate|slice(0,4) }}, {{ vehicle.mileage }} {{ vehicle.mileageUnit }}" stále k dispozici? Kontaktujte mě prosím. Děkuji.",
  580.                           "3":"Dobrý den, mám vážný zájem o vozidlo „{{ vehicle_clean_name(vehicle) }} - Rok {{ vehicle.madeDate|slice(0,4) }}, {{ vehicle.mileage }} {{ vehicle.mileageUnit }}". Je možné jej zarezervovat? Děkuji.",
  581.                           "4":"Dobrý den, mám vážný zájem o vozidlo „{{ vehicle_clean_name(vehicle) }} - Rok {{ vehicle.madeDate|slice(0,4) }}, {{ vehicle.mileage }} {{ vehicle.mileageUnit }}". Můžeme se dohodnout na nižší ceně? Je to reálné? Děkuji za odpověď."}'>
  582. Dobrý den, mám zájem o vaši nabídku „{{ vehicle_clean_name(vehicle) }} - Rok {{ vehicle.madeDate|slice(0,4) }}, {{ vehicle.mileage }} {{ vehicle.mileageUnit }}". Můžete mi prosím zavolat? Děkuji
  583.                 </textarea>
  584.                             </div>
  585.                             <p class="form__info">Kliknutím na tlačítko Odeslat zprávu vyjadřujete svůj souhlas se zásadami
  586.                                 <a  target="_blank" href="/ochrana-osobnich-udaju">Ochrany osobních údajů</a>.</p>
  587.                             <button class="form__submit form__submit--block" type="submit">
  588.                                 <i class="icon icon-email"></i>
  589.                                 Odeslat zprávu
  590.                             </button>
  591.                         </form>
  593.                     </article>
  594.             </section>
  596.         </article>
  597.     </div>
  599.     <script>
  600.         const forms  = document.querySelectorAll('form')
  601.         forms.forEach((form)=> {
  602.             form.addEventListener('submit', (e)=> {
  603.                 e.preventDefault()
  606.                 let formData =  new FormData(form);
  608.                 grecaptcha.ready(function() {
  609.                     grecaptcha.execute('{{ google_recaptcha_site_key }}', { action: 'submit' }).then(function(token) {
  611.                         formData.append('token', token)
  613.                         const data = new URLSearchParams(formData);
  615.                         (async () => {
  616.                             const rawResponse = await fetch('{{ path('app_vehicle_form_new') }}', {
  617.                                 method: 'POST',
  618.                                 body:  data
  619.                             });
  620.                             const content = await rawResponse.json();
  621.                             const button =   form.querySelector('button')
  623.                             if(content.error === false) {
  624.                                 form.reset()
  625.                                 button.innerText = 'Odesláno, děkujeme za poptávku.'
  626.                                 button.classList.add("back-green")
  627.                             } else {
  628.                                 button.innerText = content.error
  629.                                 button.classList.add("back-red")
  630.                             }
  632.                         })();
  634.                     });
  635.                 });
  639.             })
  640.         })
  642.     </script>
  645.     {#
  646.     <div class="modal" id="modal--map">
  647.         <div class="modal__overlay js-modal-close"></div>
  648.         <article class="modal__body" style="padding: 5px; max-width: none; height: 75%;">
  649.             <iframe
  650.                     src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1318529.0090685813!2d14.353945871812089!3d49.80013041918973!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470b948fd7dd8243%3A0xf8661c75d3db586f!2sCzechia!5e0!3m2!1sen!2ses!4v1677857037662!5m2!1sen!2ses"
  651.                     style="border:0; width: 100%; height: 100%;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  652.         </article>
  653.     </div>
  654.     #}
  657.     <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  659.     <script>
  662.         $(".js-select2").select2({
  663.             language: "cs",
  664.             minimumResultsForSearch: -1,
  665.             width: "100%",
  666.         });
  668.         function handleMobileContact() {
  669.             const isMobile = window.innerWidth <= 768;
  670.             const mobileContact = document.querySelector('.dealer--mobile');
  671.             const desktopContact = document.querySelector('.dealer:not(.dealer--mobile)');
  672.             
  673.             if (isMobile) {
  674.                 mobileContact.style.display = 'block';
  675.                 desktopContact.style.display = 'none';
  676.             } else {
  677.                 mobileContact.style.display = 'none';
  678.                 desktopContact.style.display = 'block';
  679.             }
  680.         }
  682.         handleMobileContact();
  683.         window.addEventListener('resize', handleMobileContact);
  684.         
  685.         // === VEHICLE STATISTICS TRACKING ===
  687.         // Trackování zobrazení stránky
  688.         trackVehicleAction('view');
  689.         
  690.         // Trackování "Zavolat prodejci" tlačítek
  691.         document.querySelectorAll('.js-modal-show[href="#modal--call"]').forEach(button => {
  692.             button.addEventListener('click', () => {
  693.                 trackVehicleAction('call_dealer');
  694.             });
  695.         });
  696.         
  697.         // Trackování "Napsat prodejci" tlačítek
  698.         document.querySelectorAll('.js-modal-show[href="#modal--write"]').forEach(button => {
  699.             button.addEventListener('click', () => {
  700.                 trackVehicleAction('message_dealer');
  701.             });
  702.         });
  703.         
  704.         // Trackování kliků na tel. čísla
  705.         setTimeout(() => {
  706.             document.querySelectorAll('a[href^="tel:"]').forEach(link => {
  707.                 link.addEventListener('click', () => {
  708.                     trackVehicleAction('phone_click');
  709.                 });
  710.             });
  711.         }, 100);
  713.         function trackVehicleAction(action) {
  714.             const formData = new FormData();
  715.             formData.append('vehicle_id', '{{ vehicle.id }}');
  716.             formData.append('action', action);
  717.             
  718.             fetch('{{ path('app_vehicle_statistics_track') }}', {
  719.                 method: 'POST',
  720.                 body: formData
  721.             }).catch(error => {
  722.                 console.log('Tracking error:', error);
  723.             });
  724.         }
  725.     </script>
  727. {% endblock %}