templates/Front/HuVignette/hu-vignette.html.twig line 26

Open in your IDE?
  1. {% extends '@templates/Front/Shop/layout.html.twig' %}
  3. {% block head %}
  4.     <head>
  5.         {% block title %} <title>{{ 'app.hu_vignette.calculator_hu_vignette'|trans }} | roviniete.ro</title> {% endblock %}
  7.         {% block metatags %}
  8.             <meta name="description" content="{% if huVignetteDescriptionForSeo|length > 0 %}{{ huVignetteDescriptionForSeo.content }}{% endif %}"/>
  9.         {% endblock %}
  10.         <meta charset="utf-8">
  11.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  12.         <meta http-equiv="Content-Language" content="ro">
  13.         <meta name="google-site-verification" content="BEtIqk-choaMawpOxG98NtbWKAZK5MuTxV_2-pSHGFQ">
  14.         <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  15.         <meta name="keywords" content="{% if huVignetteKeywordsForSeo|length > 0 %}{{ huVignetteKeywordsForSeo.content }}{% endif %}">
  17.         {% block stylesheets %}
  18.             <link rel="stylesheet" href="/assets/shop/css/homepage.css">
  19.             <link rel="stylesheet" href="/assets/shop/css/bootstrap.min.css">
  20.             <link rel="stylesheet" href="/assets/shop/css/vignette_shop.v1.css">
  21.             <link rel="stylesheet" href="/assets/shop/css/bs-stepper.css">
  22.             <link rel="stylesheet" href="/assets/shop/css/bootstrap_select.css">
  23.             {{ encore_entry_link_tags('bootstrap-fix', null, 'bootstrapTheme') }}
  24.         {% endblock %}
  26.         {{ sonata_block_render_event('sylius.shop.layout.head') }}
  27.         {% block javascripts %}
  28.             <script src="{{ asset('assets/shop/js/sentry-bundle.min.js') }}"></script>
  29.             <script>
  30.                 if (typeof Sentry !== 'undefined') {
  31.                     Sentry.init({
  32.                         dsn: "{{ sentry_dsn }}",
  33.                         integrations: [new Sentry.Integrations.TryCatch({
  34.                             eventTarget: false,
  35.                         })]
  36.                     });
  37.                 }
  38.             </script>
  39.             <script src="{{ asset('assets/shop/js/jquery.min.js') }}"></script>
  40.             <script src="{{ asset('assets/shop/js/bs-stepper.js') }}"></script>
  41.             <script src="{{ asset('assets/shop/js/jquery-ui.min.js') }}"></script>
  42.             <script src="{{ asset('assets/shop/js/popper.min.js') }}"></script>
  43.             <script src="{{ asset('assets/shop/js/bootstrap.min.js') }}"></script>
  44.             <script src="{{ asset('assets/shop/js/_bootstrap_select.min.js') }}"></script>
  45.             <script src="{{ asset('assets/shop/js/leftmenu.js') }}"></script>
  46.             {{ encore_entry_script_tags('hu-vignette') }}
  47.             <script src="/bundles/fosjsrouting/js/router.js"></script>
  48.             <script>
  49.                 dataLayer = [];
  50.             </script>
  51.             <!-- Google Tag Manager -->
  52.             <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  53.                         new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  54.                     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  55.                     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  56.                 })(window,document,'script','dataLayer','{{ gtm_code }}');</script>
  57.             <!-- End Google Tag Manager -->
  58.             <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
  59.         {% endblock %}
  60.     </head>
  61. {% endblock %}
  63. {% block header %}
  64.     <!-- Google Tag Manager (noscript) -->
  65.     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ gtm_code }}"
  66.                       height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  67.     <!-- End Google Tag Manager (noscript) -->
  68.     <div id="loadingAvailabilitiesDiv" class="loading">
  69.         <div class="card w-50" style="background-color: #F1F2F3">
  70.             <div class="card-body bg-loading-card">
  71.                 <img src="{{ asset('assets/shop/images/spinner.gif') }}"
  72.                      style="width: 50px; pointer-events: none"/>
  73.                 <h5>{{ 'app.hu_vignette.retrieve_prices_for_category'|trans }}</h5>
  74.             </div>
  75.         </div>
  76.     </div>
  77.     <div class="custom-container">
  78.         <div style="max-width: 100%">
  79.             <div class="bg-white">
  80.                 <header>
  81.                     {% include '@templates/Front/Shop/v2/_header.html.twig' %}
  83.                     {{ sonata_block_render_event('sylius.shop.layout.after_header') }}
  84.                 </header>
  85.             </div>
  86.         </div>
  87.     </div>
  88. {% endblock %}
  91. {% block content %}
  92.     {% if lastProductStatus.huVignetteStatus or isAdmin %}
  93.         <script type="text/javascript">
  94.             var one_day = '{{ 'app.hu_vignette.1_day'|trans|lower }}';
  95.             var ten_days = '{{ 'app.hu_vignette.10_days'|trans|lower }}';
  96.             var thirty_days = '{{ 'app.hu_vignette.30_days'|trans|lower }}';
  97.             var twelve_months = '{{ 'app.hu_vignette.12_months'|trans|lower|raw }}';
  98.             var twelve_months_county = '{{ 'app.hu_vignette.12_months_county'|trans|lower|raw }}';
  99.             var locale = '{{ app.request.getLocale() }}';
  100.             var isOneYearHuVignetteAvailableThisYear = {{ isOneYearHuVignetteAvailableThisYear ? 'true' : 'false' }};
  101.         </script>
  102.         <div id="specialErrors" class="alert alert-warning alert-dismissible fade show d-none" role="alert">
  103.             <div class="header text-center">
  104.                 <h2>{{ 'app.ui.error'|trans }}</h2>
  105.             </div>
  106.             <p>
  107.             <h5 class="text-center text-primary vignette-already-bought d-none">
  108.                 {{ 'app.hu_vignette.hu_vignette_available_for_choosen_date'|trans }}
  109.             </h5>
  110.             <h5 class="special-error">
  111.             </h5>
  112.             <a class="text-center">
  113.             </a>
  114.             </p>
  115.             <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  116.                 <span aria-hidden="true">&times;</span>
  117.             </button>
  118.         </div>
  119.         <div id="categoryError" class="alert alert-warning fade show d-none" role="alert">
  120.             <div class="header text-center">
  121.                 <h2>{{ 'app.ui.error'|trans }}</h2>
  122.             </div>
  123.             <p>
  124.             <h5 class="text-center text-primary">
  125.                 {{ 'app.ui.vignette_category_error'|trans }}
  126.             </h5>
  127.             <h5 class="special-error">
  128.             </h5>
  129.             <a class="text-center">
  130.             </a>
  131.             </p>
  132.         </div>
  133.         <div id="divNoSpecialCharacters" class="alert alert-warning d-none" role="alert">
  134.             {{ 'app.ui.no_special_characters_allowed'|trans }}
  135.         </div>
  136.         <div class="d-inline-flex mx-3">
  137.             <a href="{{ path('sylius_shop_homepage') }}" class="section text-primary" style="font-size: 0.8em;">{{ 'sylius.ui.home'|trans }}</a>
  138.             <div class="divider"> /</div>
  139.             <small class="section active">{{ 'app.hu_vignette.hu_vignette'|trans }}</small>
  140.         </div>
  141.         <div>
  142.             <h1 class="mx-3">{{ 'app.hu_vignette.calculator_hu_vignette'|trans }}</h1>
  143.             <div>
  144.                 <div id="stepperForm" class="bs-stepper linear">
  145.                     <div class="row" style="padding: 0 20px 20px;">
  146.                         <div class="col-12 col-sm-12 col-md-12 col-lg-10 col-xl-10">
  147.                             <div id="vignetteStep1Summary" class="card d-none my-3" onclick="stepper.previous()">
  148.                                 <div class="card-body d-flex justify-content-between align-items-center">
  149.                                     <div class="d-inline-flex justify-content-center align-items-center">
  150.                                         <img src="{{ asset('assets/shop/images/icons/ic_check_small_dark.png') }}" style="width: 30px"/>
  151.                                         <h3>
  152.                                             <a class="font-weight-bolder text-primary">{{ 'app.hu_vignette.hu_vignette_details'|trans }}:</a>
  153.                                             <a class="font-weight-bolder text-dark">{{ 'app.ui.category'|trans }} - </a>
  154.                                             <a id="categoryTitleText">-</a>;
  155.                                             <a class="font-weight-bolder text-dark">{{ 'app.hu_vignette.availability_type'|trans }} - </a>
  156.                                             <a id="availabilityTitleText">-</a>
  157.                                         </h3>
  158.                                     </div>
  159.                                     <div id="editVignetteStep1">
  160.                                         <img src="{{ asset('assets/shop/images/icons/ic_edit_grey.png') }}" style="width: 30px"/>
  161.                                     </div>
  162.                                 </div>
  163.                             </div>
  164.                         </div>
  165.                     </div>
  166.                     <div class="bs-stepper-header d-none" role="tablist">
  167.                         <div id="divStepVignetteDetails" class="step active" data-target="#vignetteDetails" onclick="stepper.previous()" style="pointer-events: none">
  168.                             <button type="button" class="step-trigger" role="tab" id="stepVignetteDetails" aria-controls="vignetteDetails" aria-selected="true">
  169.                                 <span class="bs-stepper-circle"><a>1</a></span>
  170.                                 <small style="font-size: 0.8em; letter-spacing: 1px;" class="bs-stepper-label text-primary font-weight-bolder">{{'app.hu_vignette.hu_vignette_details'|trans|upper}}</small>
  171.                             </button>
  172.                         </div>
  173.                         <div class="bs-stepper-line"></div>
  174.                         <div id="divStepVehicleDetails" class="step" data-target="#vehicleDetails" onclick="stepper.next()" style="pointer-events: none">
  175.                             <button type="button" class="step-trigger" role="tab" id="stepVehicleDetails" aria-controls="vehicleDetails" aria-selected="false" disabled>
  176.                                 <span class="inactive-step bs-stepper-circle"><a>2</a></span>
  177.                                 <small style="font-size: 0.8em; letter-spacing: 1px;" class="bs-stepper-label text-black-50 font-weight-bolder">{{'app.ui.car_data'|trans|upper}} </small>
  178.                             </button>
  179.                         </div>
  180.                         <div class="bs-stepper-line"></div>
  181.                     </div>
  182.                     <div class="bs-stepper-content">
  183.                         <form id="huVignetteForm" method="POST">
  184.                             <input type="hidden" value="1" name="isHuVignette" />
  185.                             <input type="hidden" name="productStatusExtraOptions" id="productStatusExtraOptions" value="{{ lastProductStatus.extraOptionsStatus }}">
  186.                             <div id="vignetteDetails" role="tabpanel" class="bs-stepper-pane fade active dstepper-block" aria-labelledby="stepperFormTrigger1">
  187.                                 <div class="row my-3">
  188.                                     <div class="col-12 col-sm-12 col-md-12 col-lg-10 col-xl-10">
  189.                                         <div class="card vignette-card shadow">
  190.                                             <div class="card-body">
  191.                                                 <div class="row">
  192.                                                     <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
  193.                                                         <div class="d-flex justify-content-between align-items-start">
  194.                                                             <h3 id="selectedCategoryText" class="mb-3 font-weight-bolder">{{'app.ui.select_car_type'|trans}}</h3>
  195.                                                             <img class='show-info-btn' data-for="category" src="{{ asset('assets/shop/images/icons/info.png') }}" style="width: 30px"/>
  196.                                                         </div>
  197.                                                         {% for category in categories %}
  198.                                                             {% if loop.index % 2 != 0 %}
  199.                                                                 <div class="d-flex justify-content-center my-2 {% if loop.index == categories|length %} w-50 {% endif %}">
  200.                                                             {% endif %}
  201.                                                             <label type="button" for="{{ category.code|lower }}" class="btn btn-vignette-unselected w-100 mx-3 webkit-none" data-value="front" style="height: 75px !important;">
  202.                                                                 <input type="radio" name="category" data-error-message="{{'app.errors.no_category_selected'|trans }}" id="{{ category.code|lower }}" value="{{ category.wsId }}"
  203.                                                                        data-category="{% if category.wsId == category_hu_vignette_d1m_id %}
  204.                                                                         {{ 'app.hu_vignette.category_d1m_name'|trans }}
  205.                                                                     {% elseif category.wsId == category_hu_vignette_d1_id %}
  206.                                                                         {{ 'app.hu_vignette.category_d1_name'|trans }}
  207.                                                                     {% elseif category.wsId == category_hu_vignette_d2_id %}
  208.                                                                         {{ 'app.hu_vignette.category_d2_name'|trans|raw }}
  209.                                                                     {% elseif category.wsId == category_hu_vignette_b2_id %}
  210.                                                                         {{ 'app.hu_vignette.category_b2_name'|trans }}
  211.                                                                     {% elseif category.wsId == category_hu_vignette_u_id %}
  212.                                                                         {{ 'app.hu_vignette.category_u_name'|trans|raw }}
  213.                                                                     {% endif %}"
  214.                                                                        hidden>
  215.                                                                 <div class="d-flex justify-content-between align-items-center mt-2">
  216.                                                                     <h5 class="text-dark font-weight-bolder" id="vehicleType-{{category.code|first|lower}}">
  217.                                                                         {% if category.wsId == category_hu_vignette_d1m_id %}
  218.                                                                             {{ 'app.hu_vignette.category_d1m_short_code'|trans }}
  219.                                                                         {% elseif category.wsId == category_hu_vignette_d1_id %}
  220.                                                                             {{ 'app.hu_vignette.category_d1_short_code'|trans }}
  221.                                                                         {% elseif category.wsId == category_hu_vignette_d2_id %}
  222.                                                                             {{ 'app.hu_vignette.category_d2_short_code'|trans|raw }}
  223.                                                                         {% elseif category.wsId == category_hu_vignette_b2_id %}
  224.                                                                             {{ 'app.hu_vignette.category_b2_short_code'|trans }}
  225.                                                                         {% elseif category.wsId == category_hu_vignette_u_id %}
  226.                                                                             {{ 'app.hu_vignette.category_u_short_code'|trans|raw }}
  227.                                                                         {% endif %}
  228.                                                                     </h5>
  229.                                                                     <img class="ml-auto" src="{{ (asset('assets/shop/images/icons/hu_' ~ category.code|lower) ~ '_orange.png')}}" style="height: 46px"/>
  230.                                                                 </div>
  231.                                                             </label>
  232.                                                             {% if loop.index % 2 == 0 or loop.index == categories|length %}
  233.                                                                 </div>
  234.                                                             {% endif %}
  235.                                                         {% endfor %}
  236.                                                         <div class="d-flex justify-content-center">
  238.                                                         </div>
  239.                                                     </div>
  241.                                                     <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 text-center">
  242.                                                         <div class="d-flex justify-content-between">
  243.                                                             <h3 class="mb-3 font-weight-bolder">{{'app.ui.choose_validity'|trans}}</h3>
  244.                                                             <img class="show-info-btn" data-for="availability" src="{{ asset('assets/shop/images/icons/info.png') }}" style="width: 30px;height: 30px;"/>
  245.                                                         </div>
  246.                                                         <div class="d-flex justify-content-between my-2 availability-wrapper" data-error-message="{{'app.errors.no_availability_selected'|trans }}">
  247.                                                             <div data-toggle="tooltip" data-placement="top" class="w-100 mx-3 tooltip-prevent-availability hover-tooltip" title="{{ 'app.hu_vignette.please_select_a_category_first'|trans }}">
  248.                                                                 <label type="button" id="lblAv1Day" for="av_1" class="btn btn-vignette-unselected w-100 webkit-none d-flex align-items-center justify-content-center" data-value="{{ 'app.hu_vignette.1_day'|trans }}" data-title="front" style="min-height: 145px !important;">
  249.                                                                     <div class="mx-2 my-2">
  250.                                                                         <input type="radio" name="availability" id="av_1" value="31" data-value="{{ 'app.hu_vignette.1_day'|trans }}" hidden disabled>
  251.                                                                         <h2 id="txtAv1Day" class="text-primary txtAvailability">{{ 'app.hu_vignette.1_day'|trans }}</h2>
  252.                                                                         <a id="txtAv1DayPrice" class="txtAvailabilityPrice text-dark"></a>
  253.                                                                     </div>
  254.                                                                 </label>
  255.                                                             </div>
  256.                                                             <div data-toggle="tooltip" data-placement="top" class="w-100 mx-3 tooltip-prevent-availability hover-tooltip" title="{{ 'app.hu_vignette.please_select_a_category_first'|trans }}">
  257.                                                                 <label type="button" id="lblAv10Days" for="av_10" class="btn btn-vignette-unselected w-100 webkit-none d-flex align-items-center justify-content-center" data-value="{{ 'app.hu_vignette.10_days'|trans }}" data-title="front" style="min-height: 145px !important;">
  258.                                                                     <div class="mx-2 my-2">
  259.                                                                         <input type="radio" name="availability" id="av_10" value="1" data-value="{{ 'app.hu_vignette.10_days'|trans }}" hidden disabled>
  260.                                                                         <h2 id="txtAv10Days" class="text-primary txtAvailability">{{ 'app.hu_vignette.10_days'|trans }}</h2>
  261.                                                                         <a id="txtAv10DaysPrice" class="txtAvailabilityPrice text-dark"></a>
  262.                                                                     </div>
  263.                                                                 </label>
  264.                                                             </div>
  265.                                                     </div>
  267.                                                     <div class="d-flex justify-content-between my-2">
  268.                                                         <div data-toggle="tooltip" data-placement="top" class="w-100 mx-3 tooltip-prevent-availability hover-tooltip" title="{{ 'app.hu_vignette.please_select_a_category_first'|trans }}">
  269.                                                             <label type="button" id="lblAv30Days" for="av_30" class="btn btn-vignette-unselected w-100 webkit-none d-flex align-items-center justify-content-center" data-value="{{ 'app.hu_vignette.30_days'|trans|raw }}" data-title="front" style="min-height: 145px !important;">
  270.                                                                 <div class="mx-2 my-2">
  271.                                                                     <input type="radio" name="availability" id="av_30" value="2" data-value="{{ 'app.hu_vignette.30_days'|trans|raw }}" hidden disabled>
  272.                                                                     <h2 id="txtAv30Days" class="text-primary txtAvailability">{{ 'app.hu_vignette.30_days'|trans|raw }}</h2>
  273.                                                                     <a id="txtAv30DaysPrice" class="txtAvailabilityPrice text-dark"></a>
  274.                                                                 </div>
  275.                                                             </label>
  276.                                                         </div>
  277.                                                         <div data-toggle="tooltip" data-placement="top" class="w-100 mx-3 tooltip-prevent-availability hover-tooltip" title="{{ 'app.hu_vignette.please_select_a_category_first'|trans }}">
  278.                                                             <label type="button" id="lblAv12Months" for="av_12" class="btn btn-vignette-unselected w-100 webkit-none d-flex align-items-center justify-content-center" data-value="{{ 'app.hu_vignette.12_months'|trans|raw }}" data-title="front" style="min-height: 145px;">
  279.                                                                 <div class="mx-2 my-2">
  280.                                                                     <input type="radio" name="availability" id="av_12" value="3" data-value="{{ 'app.hu_vignette.12_months'|trans|raw }}" hidden disabled>
  281.                                                                     <h2 id="txtAv1Year" class="text-primary txtAvailability">{{ 'app.hu_vignette.12_months'|trans|raw }}</h2>
  282.                                                                     <a id="txtAv1YearPrice" class="txtAvailabilityPrice text-dark"></a>
  283.                                                                 </div>
  284.                                                             </label>
  285.                                                         </div>
  286.                                                     </div>
  288.                                                     <div class="d-flex justify-content-between my-2">
  289.                                                         <div data-toggle="tooltip" data-placement="top" class="w-100 mx-3 tooltip-prevent-availability hover-tooltip" title="{{ 'app.hu_vignette.please_select_a_category_first'|trans }}">
  290.                                                             <label type="button" id="lblAv12County" for="av_12_county" class="btn btn-vignette-unselected w-100 webkit-none d-flex align-items-center justify-content-center" data-value="{{ 'app.hu_vignette.12_months_county'|trans|raw }}" data-title="front" style="min-height: 145px;">
  291.                                                                 <div class="mx-2 my-2">
  292.                                                                     <input type="radio" name="availability" id="av_12_county" value="4" data-value="{{ 'app.hu_vignette.12_months_county'|trans|raw }}" hidden disabled>
  293.                                                                     <h2 id="txtAv12County" class="text-primary txtAvailability">{{ 'app.hu_vignette.12_months_county'|trans|raw }}</h2>
  294.                                                                     <a id="txtAv12CountyPrice" class="txtAvailabilityPrice text-dark"></a>
  295.                                                                 </div>
  296.                                                             </label>
  297.                                                         </div>
  298.                                                     </div>
  300.                                                     <div id="selectCountiesDiv" class="d-none">
  301.                                                         <label for="counties">{{ 'app.hu_vignette.select_counties'|trans }}</label> <br/>
  302.                                                         <select id="counties" class="selectpicker w-100" name="counties[]" data-style="btn-light h-35-px"
  303.                                                                 multiple data-live-search="true" data-done-button="true" data-actions-box="true" data-live-search-style="startsWith"
  304.                                                                 title="{{ 'app.hu_vignette.please_select_at_least_one'|trans }}">
  305.                                                         </select>
  306.                                                     </div>
  307.                                                     <h6 class="mt-2">{{ 'app.hu_vignette.price_without_tax'|trans }}</h6>
  308.                                                 </div>
  309.                                             </div>
  310.                                         </div>
  311.                                     </div>
  312.                                 </div>
  313.                                 <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 d-flex align-items-center justify-content-center my-4">
  314.                                     <div class="btn-wrapper">
  315.                                         <button id="btnSubmitStep1" type="button" class="btn btn-primary-inactive w-100" style="height: 40px" disabled>
  316.                                             <a>{{'app.ui.next_step'|trans}}</a>
  317.                                         </button>
  318.                                     </div>
  319.                                 </div>
  320.                             </div>
  321.                         </div>
  322.                         <div id="vehicleDetails" role="tabpanel" class="bs-stepper-pane fade dstepper-none" aria-labelledby="stepperFormTrigger2">
  323.                             <div class="row my-3">
  324.                                 <div class="col-12 col-sm-12 col-md-12 col-lg-10 col-xl-10">
  325.                                     <div class="card vignette-card shadow">
  326.                                         <div class="card-body">
  327.                                             <div class="row">
  328.                                                 <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
  329.                                                     <h3 class="font-weight-bolder mb-2 text-center">{{ 'app.ui.select_start_date'|trans}}</h3>
  330.                                                     <div class="d-flex justify-content-center align-items-center">
  331.                                                         <input type="hidden" id="validFrom" name="validFrom">
  332.                                                         <div id="datepicker" data-error-message = '{{'app.errors.no_date_selected'|trans }}'></div>
  333.                                                     </div>
  334.                                                     <div class="d-flex justify-content-center mt-3">
  335.                                                         <div class="d-flex">
  336.                                                             <div class="current-date-circle" style="width: 18px; height: 18px"></div>
  337.                                                             <div>
  338.                                                                 <a class="ml-2 text-dark">{{'app.ui.current_date'|trans}}:</a> <br/>
  339.                                                                 <h5 class="ml-2 text-dark">{{ "now"|date("d/m/Y") }}</h5>
  340.                                                             </div>
  341.                                                         </div>
  342.                                                         <div id="divStartDatePicker">
  343.                                                             <div class="d-flex ml-4">
  344.                                                                 <div class="picked-date-circle" style="width: 18px; height: 18px"></div>
  345.                                                                 <div>
  346.                                                                     <a class="ml-2 text-dark">{{'app.ui.start_date'|trans}}:</a> <br/>
  347.                                                                     <h5 class="ml-2 text-muted" id="startDatePicker">DD/MM/YYYY</h5>
  348.                                                                 </div>
  349.                                                             </div>
  350.                                                         </div>
  351.                                                     </div>
  352.                                                     <div class="date-disclaimer">
  353.                                                         {% autoescape false %}
  354.                                                             {{'app.ui.date_disclaimer'|trans}}
  355.                                                         {% endautoescape %}
  356.                                                     </div>
  357.                                                 </div>
  358.                                                 <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6" style="padding-left: 50px; padding-right: 50px">
  359.                                                     <h3 class="mb-3 font-weight-bolder">{{'app.ui.select_car_data'|trans}}</h3>
  360.                                                     <div class="row mt-3 d-flex align-items-end">
  361.                                                         <div class="col-5 col-sm-5 col-md-6 col-lg-5 col-xl-5">
  362.                                                             <label for="carCountry" class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.country_code'|trans}}</label>
  363.                                                             <select id="carCountry" name="carCountry" class="form-control input-custom input-custom-grey" required>
  364.                                                                 <option value="">{{ 'app.ui.country'|trans}}</option>
  365.                                                                 {% for country in countries |sort((a, b) => a.name > b.name) %}
  366.                                                                     <option value="{{ country.code }}">{{ country.name }}</option>
  367.                                                                 {% endfor %}
  368.                                                             </select>
  369.                                                         </div>
  370.                                                         <div class="col-7 col-sm-7 col-md-6 col-lg-7 col-xl-7">
  371.                                                             <label for="registrationPlate" class="text-dark lbl-custom lbl-custom-grey d-none">{{'app.ui.registration_plate'|trans}}</label>
  372.                                                             <input id="registrationPlate" data-warning-message="{{ 'app.warning.characters_not_allowed'|trans }}" data-error-message="{{'app.errors.no_plate'|trans }}" name="registrationPlate" maxlength="10" type="text" class="form-control input-custom input-custom-grey
  373.                                                             " placeholder="{{'app.ui.registration_plate'|trans}}" oninvalid="this.setCustomValidity('{{ 'app.ui.please_fill_this_field'|trans }}')"
  374.                                                                        oninput="setCustomValidity('')"
  375.                                                                        required>
  376.                                                             </div>
  377.                                                             <div data-error-message = '{{ 'app.ui.invalid_registration_plate'|trans }}' id="registrationPlateError"></div>
  378.                                                         </div>
  379.                                                         <div class="row mt-2">
  380.                                                             <div class="col-12">
  381.                                                                 <div id="vinBlock">
  383.                                                                 </div>
  384.                                                             </div>
  385.                                                         </div>
  386.                                                     </div>
  387.                                                 </div>
  388.                                             </div>
  389.                                         <div id="divPaymentNotAvailable" class="alert alert-warning d-none mt-2" role="alert">
  390.                                             {{ 'app.ui.info_payment_not_available'|trans|raw }}
  391.                                         </div>
  392.                                         </div>
  393.                                     </div>
  394.                                     <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 d-flex align-items-center justify-content-center my-4">
  395.                                         <div>
  396.                                             <button type="button" class="btn btn-grey btn-add-to-cart w-100 mb-3" style="height: 40px">
  397.                                                 <a class="submit-button">{{'app.ui.add_to_cart'|trans}}</a>
  398.                                             </button>
  399.                                             <button id="btnSubmitVignette" type="submit" class="submit-button btn btn-primary-inactive btn-submit w-100" style="height: 40px"><a>{{'app.ui.buy_now'|trans}}</a></button>
  400.                                         </div>
  401.                                     </div>
  402.                                 </div>
  403.                             </div>
  404.                         </form>
  405.                         <div class="row">
  406.                             <div class="col-6 col-sm-6 col-md-6 col-lg-5 col-xl-5">
  407.                                 <div class="info-text category">
  408.                                     {% autoescape false %}
  409.                                         {{ 'app.hu_vignette.category_description'|trans }}
  410.                                     {% endautoescape %}
  411.                                 </div>
  412.                                 <div class="card my-3">
  413.                                     <div class="card-body d-flex justify-content-between align-items-center">
  414.                                         <img src="{{ asset('assets/shop/images/hungary/nemzeti.png') }}" style="max-width: 50px"/>
  415.                                         <h6 class="font-weight-normal">{{ 'app.hu_vignette.national_payment_distributor'|trans }}</h6>
  416.                                     </div>
  417.                                 </div>
  418.                             </div>
  420.                             <div class="col-6 col-sm-6 col-md-6 col-lg-5 col-xl-5">
  421.                                 <div class="info-text availability">
  422.                                     {% autoescape false %}
  423.                                         {{ 'app.hu_vignette.availability_description'|raw|trans }}
  424.                                     {% endautoescape %}
  425.                                 </div>
  426.                             </div>
  427.                         </div>
  428.                     </div>
  429.                 </div>
  430.             </div>
  431.         </div>
  433.         <div class="bs-stepper-content">
  434.             <div class="row my-3">
  435.                 {% if accordionBlocksAboutHuVignette|length > 0 %}
  436.                     {% for key, block in accordionBlocksAboutHuVignette %}
  437.                         <div class="col-3 my-3">
  438.                             <button class="accordion" type="button" data-toggle="collapse" data-target="#collapse{{ key }}" aria-expanded="false" aria-controls="collapse{{ key }}">{{ block.name }}</button>
  439.                             <div class="collapse" id="collapse{{ key }}">
  440.                                 <div class="card card-body border">{{ block.content|raw }}</div>
  441.                             </div>
  442.                         </div>
  443.                     {% endfor %}
  444.                 {% endif %}
  445.             </div>
  446.         </div>
  448.         <script>
  449.             $(document).ready(function () {
  450.                 $('.selectpicker').selectpicker({
  451.                     'selectAllText': '{{ 'app.ui.select_all'|trans }}',
  452.                     'deselectAllText': '{{ 'app.ui.deselect_all'|trans }}',
  453.                     'doneButtonText': '{{ 'app.ui.close'|trans }}',
  454.                 });
  455.                 $('.show-info-btn').click(function() {
  456.                     $('.info-text.'+$(this).data('for')).toggleClass('d-none');
  457.                 });
  459.                 $('[data-toggle="tooltip"]').not('.hover-tooltip').tooltip({
  460.                     html:true,
  461.                     trigger: 'hover click focus'
  462.                 });
  464.                 $('.hover-tooltip').tooltip({
  465.                     html:true,
  466.                     trigger: 'hover'
  467.                 });
  468.                 let locale = getLocale();
  469.                 function getLocale() {
  470.                     let url = Routing.generate('app_shop_get_locale');
  471.                     $.ajax({
  472.                         url: url,
  473.                         type: 'GET',
  474.                         async: true,
  475.                         dataType: 'json',
  477.                         success: function (locale) {
  478.                             if (locale == 'ro_RO' || locale == 'ro') {
  479.                                 $('[name="carCountry"] option').filter(function() {
  480.                                     return ($(this).val() == 'RO');
  481.                                 }).prop('selected', true).change();
  482.                             } else if (locale == 'hu') {
  483.                                 $('[name="carCountry"] option').filter(function() {
  484.                                     return ($(this).val() == 'HU');
  485.                                 }).prop('selected', true).change();
  486.                             }
  487.                         },
  488.                         error: function (data) {
  490.                         }
  491.                     });
  492.                 }
  493.             })
  494.             var stepper = new Stepper($('.bs-stepper')[0]);
  495.         </script>
  497.         <style>
  499.             .date-disclaimer {
  500.                 border: 1px solid;
  501.                 padding: 5px;
  502.             }
  504.             .show-info-btn {
  505.                 cursor: pointer;
  506.             }
  507.             .info-text {
  508.                 display: block;
  509.                 border: 1px solid lightgray;
  510.                 padding: 20px;
  511.                 width: 100%;
  512.                 background: white;
  513.                 border-radius: 20px;
  514.             }
  515.             .webkit-none {
  516.                 -webkit-appearance: none !important;
  517.             }
  518.             .tooltip-inner {
  519.                 max-width: 350px; /* set this to your maximum fitting width */
  520.                 width: inherit; /* will take up least amount of space */
  521.             }
  522.             .loading {
  523.                 display: flex;
  524.                 flex-direction: column;
  525.                 justify-content: center;
  526.                 align-items: center;
  527.                 text-align: center;
  528.                 min-height: 100vh;
  529.                 z-index: 999;
  530.                 position: fixed;
  531.                 background-color: rgba(0,0,0,0.7);
  532.                 opacity: 100%;
  533.                 width: 100%;
  534.                 height: 100%;
  535.             }
  536.             .h-35-px {
  537.                 height: 35px !important;
  538.             }
  540.             .datepicker-disabled .ui-datepicker-next {
  541.                 display: none;
  542.             }
  544.             .datepicker-disabled .ui-state-default {
  545.                 color: lightgray;
  546.                 cursor: default;
  547.             }
  549.             .ui-state-highlight, .ui-widget-content .ui-state-highlight {
  550.                 background: none !important;
  551.                 color: #454545 !important;
  552.                 border: none !important;
  553.             }
  554.         </style>
  555.     {% else %}
  556.         <div class="card text-center my-3">
  557.             <div class="card-header">
  558.                 <h2>{{ 'app.ui.disabled_temporary'|trans }}</h2>
  559.             </div>
  560.             <div class="card-body">
  561.                 <a href="{{ path('sylius_shop_homepage') }}">{{ 'sylius.ui.back_to_store'|trans }}</a>
  562.             </div>
  563.         </div>
  564.     {% endif %}
  565. {% endblock %}
  567. {% block footer %}
  568.     {% include '@templates/Front/Shop/v2/_footer.html.twig' %}
  569. {% endblock %}